CSS Formatter
Free online CSS beautifier. Expand minified CSS, fix indentation and split long selector lists. Supports CSS, SCSS and LESS. Formats only - no minifier.
About CSS Formatter
Stylesheets are re-printed here by Prettier's PostCSS parser, running entirely in your browser at two-space indentation and an 80-column print width. The source is parsed into a rule tree and printed fresh, so whether you paste a hand-written file or one line of minified production CSS, the output has the same shape.
A few values are normalised on the way through, and it is worth knowing which. Hex colours are lowercased, so #FFAA00 comes back as #ffaa00. Redundant trailing zeros are trimmed, so 0.50px becomes 0.5px. A missing space after an at-rule is inserted, so @media(max-width:600px) becomes @media (max-width: 600px). Selector text itself is left alone — a class written in capitals stays in capitals, because changing it could break a match. Nothing is reordered: declarations, rules and media blocks come out in exactly the order you wrote them.
Selector lists are split one per line as soon as the combined line passes the 80-column target, which is the single biggest readability win on a large stylesheet — a twelve-selector rule that was an unreadable comma run becomes a scannable column. Comments survive, including the section-header comments most stylesheets use for navigation, so the output stays diff-friendly against the original.
The parser is lenient enough to re-indent nested SCSS blocks and LESS variable declarations, so you can usually paste a preprocessor file and get sensible structure back. It is not a compiler though: mixins are not expanded, variables are not resolved, and unusual preprocessor-only syntax can still be rejected. If you need compiled CSS, run your build first and format the result.
A malformed declaration stops the run rather than being guessed at. Writing "color red" without the colon produces a CssSyntaxError naming the unknown word and the line and column where it appears, which makes the formatter a quick way to locate the one broken rule in a stylesheet a browser is silently ignoring. Note also what this page does not do: it only beautifies. There is no minify direction here, so use your bundler or a dedicated compressor for production output.
Rebuilds Structure From Scratch
A minified stylesheet with every rule on one line expands to full indentation, because the printer parses the source and re-emits it rather than reflowing the newlines that were already there.
Consistent Values, Untouched Selectors
Hex colours are lowercased and pointless trailing zeros removed, while selector text, declaration order and comments are preserved exactly so the result still diffs cleanly against your original.
Points At Broken Rules
A missing colon or stray token raises a CssSyntaxError with a line and column instead of being silently skipped the way a browser skips it, which makes the formatter a fast way to find a rule that is not applying.
Frequently Asked Questions
Does it minify CSS as well?
No. This page only expands and indents. There is a single direction of travel: parse the stylesheet, print it readable. Minification belongs in your build pipeline, where it can also drop unused rules and merge duplicates with knowledge of the whole project — something a single-file browser tool cannot do safely.
Will it reorder or deduplicate my declarations?
Never. Order is meaningful in CSS — a later declaration overrides an earlier one with equal specificity — so rules, declarations and media blocks come out in the order you wrote them. Duplicate properties are left as duplicates. If you want alphabetical ordering or deduplication, that is a linter job, not a formatter job.
Can I paste SCSS or LESS?
Usually yes for indentation purposes. Nested blocks are re-indented correctly and LESS variable declarations are preserved. But this is the CSS printer, not a preprocessor: mixins are not expanded, variables are not resolved, and less common preprocessor constructs may be rejected with a parse error. Compile first if the file is unusual.
Why did my stylesheet fail to format?
Something in it is not parseable CSS. The error names the token it choked on plus a line and column. The usual causes are a missing colon or semicolon, an unbalanced brace, a stray character pasted in from a rich-text editor, or template syntax such as a PHP tag or a build-time variable left in the file.
Are my custom properties and modern at-rules supported?
Custom properties, calc expressions, @supports, @layer, @container and nesting all parse and re-indent correctly. A custom property value is kept as you wrote it apart from tidying the spacing, which matters because a custom property can legally hold a fragment that would not be valid as a standalone declaration — the printer does not try to interpret it.
What happens to my comments and licence headers?
They are kept and placed on their own lines. A licence banner at the top of the file stays at the top. This matters if you are formatting a vendored stylesheet whose licence requires the header to be retained.
How do I read a minified stylesheet I did not write?
Format it, then work top down. Because rule order is preserved, the output is a faithful map of the original cascade: the last rule that sets a property is the one winning. Split selector lists make it easy to grep for a class name, and the restored comments — build tools usually keep licence banners and often keep section headers — tell you where one vendored library ends and the next begins. What you will not recover is the original file boundaries of a bundled stylesheet, since concatenation happened before minification.
Does anything get uploaded?
No. The CSS parser is a JavaScript module that downloads once and then runs inside this tab, so the stylesheet you paste or load from disk never leaves your machine. That makes it safe for unreleased design work and for stylesheets pulled out of an internal application.