Beautify CSS Online — Format & Unminify Stylesheets
One rule per line, consistent indentation — minified CSS made readable again.
🔒 Runs in your browser — files never uploaded ⚡ No signup 💯 Free
Format CSS into the conventional shape — one declaration per line, consistent indentation, a blank structure you can scan. Fully reverses minification, since CSS minification (unlike JavaScript's) destroys nothing but whitespace.
Runs locally via js-beautify's CSS formatter.
How to use CSS Beautifier
- Paste CSS — minified or just untidy.
- Pick your indent style.
- Click Beautify.
- Copy or download as a .css file.
Reading a site's real stylesheet
The main use case: view-source on a production site gives you one 4,000-character line. Beautified, it becomes a stylesheet you can actually learn from — how they did the layout, what their breakpoints are, which custom properties drive the theme. Combined with the palette generator and contrast checker, it's a decent way to study design systems in the wild.
Formatting conventions worth keeping
The output follows the broadly agreed shape: selector and brace on one line, one declaration per line, closing brace on its own. It doesn't reorder declarations or merge selectors — formatting shouldn't change behaviour, and while CSS order rarely matters within a rule, it always matters between rules (that's the cascade). What you pasted is what you get back, just readable.
The reverse direction
Shipping code the other way? The CSS minifier undoes all this whitespace for production.
Frequently asked questions
Does beautifying change what the CSS does?
No — it's pure whitespace. Unlike JavaScript, CSS minification destroys nothing but formatting, so beautify⇄minify round-trips losslessly. Rules keep their order (which matters — that's the cascade) and declarations keep theirs.
Can I use this to read another site's stylesheet?
Yes — that's the classic use. View-source or the network tab gives you the minified file; pasted here it becomes legible. Styles aren't secret (every visitor's browser gets them), and reading how good sites are built is how most people learned CSS.
Why are my media queries indented differently than I expect?
Rules inside @media get one extra indent level, reflecting their real nesting. If a stylesheet looks over-indented after formatting, it usually means more of it lives inside at-rules than its author remembered — which is useful to see.