Free CSS Formatter — Beautify & Pretty-Print CSS Online
How it works
Paste cramped, minified, or just plain messy CSS and get it back beautifully structured: each selector on its own line, one declaration per line indented by two spaces, and a blank line between rules. Nested blocks like @media are indented one level deeper so the structure stays obvious. Comments and quoted strings are preserved exactly — the parser skips over them instead of splitting on their contents.
CSS Formatter
Pretty-print messy or minified CSS — selectors lined up, declarations indented, rules easy to scan.
1 Paste your CSS
2 Or try an example
3 Beautify it
✅ Your beautified CSS
Everyday uses
- Untangling minified CSS: downloaded a theme or library and need to tweak it? Beautify first, edit second.
- Code reviews: consistent indentation makes stylesheet diffs readable instead of a wall of text.
- Learning CSS: seeing one declaration per line shows exactly which properties each selector sets.
- Debugging overrides: a clean layout makes it far easier to spot duplicate or conflicting rules.
Frequently asked questions
Does it handle @media and other nested blocks?
Yes. Blocks nested inside @media, @supports, or @keyframes are indented one extra level, so the nesting structure stays visible. Grouped selectors (like h1, h2) are split so each selector gets its own line.
Will it change what my CSS does?
No. Formatting only changes whitespace and line breaks — selectors, properties, and values keep their meaning, and quoted strings and comments are preserved word for word. The one cosmetic touch is normalizing each declaration to property: value; with a single space after the colon.
Is my CSS sent to a server?
No. The parser and formatter run entirely in your browser with JavaScript. Your stylesheets — including work for clients — never leave your device.