CSS Formatter
Expand minified CSS into readable rules, one declaration per line, with nested blocks such as media queries indented properly.
- Runs in your browser
- No sign-up
- Free to use
How to use CSS Formatter
- Paste your CSS, SCSS or LESS into the input editor, or open a stylesheet file.
- Pick the indentation style and whether each selector in a group should sit on its own line.
- Select Format CSS.
- Copy the result or download it as a .css file.
CSS Formatter features
One declaration per line
Each property sits on its own line, which makes rules easy to scan and diff.
Nested blocks indented
@media, @supports, @layer and native CSS nesting are indented by depth.
Selector separation
Optionally place each selector of a comma-separated list on a new line.
SCSS and LESS friendly
Preprocessor syntax such as nesting, variables and mixins is preserved.
Comments kept
Comments stay with the code they describe.
Runs locally
Stylesheets are formatted in the browser.
When to use CSS Formatter
- Reading a minified production stylesheet to debug a styling issue.
- Cleaning up CSS copied from different sources into one consistent style.
- Preparing a stylesheet for code review.
- Studying how a framework or theme is written.
CSS Formatter FAQ
Does formatting change what the CSS does?
No. Only whitespace is changed. Selectors, properties, values and their order stay the same, so the cascade is unaffected.
Can it unminify CSS exactly as it was written?
It restores readable structure, but information removed by minification, such as comments, original blank lines and shorthand that was merged, cannot be recovered.
Does it validate my CSS?
No. It is a formatter, not a linter. Invalid declarations are indented like any others. Unbalanced braces usually show up as indentation that never returns to the left edge.
Will it sort properties?
No. Declaration order is preserved because reordering can change which rule wins when shorthand and longhand properties are mixed.
Does it support modern CSS?
Yes, including custom properties, nesting, container queries, @layer and functions such as clamp() and color-mix().
Readable CSS is maintainable CSS
Stylesheets grow by accretion, and the same file is often edited by several people over years. A consistent layout, one selector group followed by an indented block with one declaration per line, makes it possible to see at a glance what a rule sets and to produce clean line-by-line diffs in version control.
Minification removes that layout for production, joining everything into one line. When you need to investigate a deployed site, formatting the minified file is the quickest way to get something readable. Keep the formatted version for reading only and make changes in your original source, so comments and structure are not lost.