Input
Developer utility
CSS Formatter
Beautify or minify CSS without uploading code. Inspect rules, selectors and declarations, review lightweight syntax hints, and test the result in an isolated preview.
Size
Rules
Selectors
Declarations
Output
Formatted or minified CSS
Validation hints
CSS issues and warnings
Structure
Selector and declaration summary
| # | Selector / at-rule | Declarations | Properties |
|---|
Isolated preview
Sample rendered with your CSS
The preview runs in a sandboxed frame with a restrictive Content Security Policy, so its styles cannot affect this page and remote resources are blocked.
Examples
Common CSS samples
CSS quick reference
| Concept | Example | Notes |
|---|---|---|
| Rule | .card { padding: 16px; } | A selector followed by a declaration block. |
| Declaration | color: #333; | A property and value separated by a colon. |
| Custom property | --accent: #16735f; | A reusable CSS variable whose name starts with two hyphens. |
| Media query | @media (max-width: 640px) | Applies nested rules when a condition matches. |
| Keyframes | @keyframes fade | Defines the steps of a CSS animation. |
Formatting and validation notes
String-aware formattingQuoted strings, comments and parentheses are scanned before structural whitespace is changed.
Conservative minificationUnnecessary whitespace is removed while spacing inside functions such as calc() is preserved.
Lightweight validationHints cover balanced delimiters, unterminated strings or comments and missing declaration colons. Use a standards parser or linter for complete conformance checks.
Local processingCSS stays in your browser. Formatting, statistics, validation and preview do not upload the input.
CSS formatter FAQ
Does this CSS formatter upload my code?
No. Formatting, minifying, statistics, validation hints and preview all run locally in your browser.
Can this replace a full CSS linter?
No. It catches common structural problems, but standards conformance, browser compatibility and project rules require a dedicated parser or linter.
Will minifying CSS change its behavior?
The minifier preserves strings, comments when requested and spacing inside functions. Always test unusual legacy hacks or build-tool directives before deployment.
Is the CSS preview isolated from the page?
Yes. It uses a sandboxed iframe and a restrictive Content Security Policy that blocks remote resources.