CSS Formatter & Beautifier
This CSS formatter puts one declaration per line, normalises the spacing around braces, colons and commas, breaks long selector lists one per line, and indents nested at-rules such as media queries consistently. Crucially it does not rewrite your values: colours are not converted between hex and rgb, units are not normalised, and shorthand is neither expanded nor collapsed. Only whitespace and line breaks change, so the formatted sheet renders identically to the original — which means you can safely format a file you did not write.
How it works
Puts one declaration per line, normalises spacing around braces, colons and commas, and indents nested at-rules such as media queries consistently.
Values are left alone — colours, units and shorthand are not rewritten, so the formatted sheet renders identically to the original.
Everything runs in your browser — nothing you paste is sent to a server.
How to format CSS online
- Paste your stylesheet into the input on the left.
- Choose an indent size and wrap width.
- Copy or download the formatted CSS.
What formatting changes
- One declaration per line, with consistent spacing around braces, colons and commas.
- Selector lists broken one per line so long lists stay readable.
- Nested at-rules such as media queries indented consistently.
Your values are not rewritten
Colours are not converted between hex and rgb, units are not normalised, and shorthand is not expanded or collapsed. Only whitespace and line breaks change, so the formatted sheet renders identically to the original — which means you can format a file you did not write without worrying about what it might alter.
Common use cases
- Reading a minified stylesheet from a production build.
- Normalising a file several people have edited in different styles.
- Making a diff readable before review.
Frequently asked questions
How do I beautify CSS?
Paste your stylesheet into the left panel and the formatted result appears on the right, one declaration per line with consistent spacing. Copy or download it when you are done.
Does formatting change how my page looks?
No. Only whitespace and line breaks change. Colours, units and shorthand are left exactly as written, so the formatted sheet renders identically.
Can it expand minified CSS?
Yes. That is the most common use — a production stylesheet on one long line becomes readable again so you can find the rule you are looking for.
Are media queries and nested at-rules handled?
Yes. They are indented consistently along with their contents, so the structure of a responsive sheet stays visible.
Is my code uploaded anywhere?
No. Everything runs entirely in your browser, so nothing you paste is transmitted or stored on a server.
Related tools
CSS Minifier
This CSS minifier strips comments and whitespace while protecting strings and url() values.
SCSS Formatter
This SCSS formatter understands nesting, variables and mixins rather than treating them as unknown CSS.
HTML Formatter & Beautifier
This HTML formatter re-indents markup using a real parser, so nesting and inline elements are handled correctly.