CSS Beautifier
Restore readable structure to compressed CSS bundles. Configurable indent, selector-per-line layout, and end-of-line newlines. Powered by css-beautify, the CSS half of js-beautify.
Minified in, readable out
Same rules, different shape. Rendering is identical — only whitespace, line breaks, and indentation change.
.button{background:#fff;color:#000;border:1px solid #ccc;padding:10px 20px}.button:hover,.button:focus{background:#f5f5f5}@media (max-width:768px){.button{padding:8px 16px;font-size:14px}}.button {
background: #fff;
color: #000;
border: 1px solid #ccc;
padding: 10px 20px;
}
.button:hover,
.button:focus {
background: #f5f5f5;
}
@media (max-width: 768px) {
.button {
padding: 8px 16px;
font-size: 14px;
}
}When you need readable CSS, fast
Inspecting vendor styles, debugging cascade issues, or studying a bundle.
Inspect vendor styles
Format a CSS framework or theme to see exactly which selectors set what.
Debug cascade issues
Beautify production CSS so DevTools' "computed" panel makes sense alongside the source.
Diff before review
Beautify both versions before Code Diff — line-based diffs need real lines.
Learning by reading
Format Bootstrap, Tailwind output, or a system's foundation styles to learn from working CSS.
How to beautify CSS
Paste or drop your CSS
Paste minified CSS into the left editor or drop a .css file onto the upload area.
Pick your style
Choose 2/4-space or tab indent, blank lines between rules, selector layout, and end-of-line.
Click Beautify
css-beautify runs locally in your browser. The right editor fills with the formatted result.
Copy or download
Copy with one click, or download as beautified.css.
Frequently asked questions
No — purely formatting changes. CSS whitespace doesn't affect rendering anywhere outside string-valued properties (which the beautifier doesn't touch).
Mostly yes — css-beautify handles nested rules, @-rules, and most preprocessor syntax adequately for casual reading. For canonical SCSS / LESS formatting use Prettier or the language's own formatter.
Preserved. css-beautify only touches whitespace and line breaks; modern CSS — custom properties, calc(), container queries, @layer — passes through unchanged.
A few hundred kilobytes is comfortable. Multi-megabyte bundles will work but may take several seconds.
No. css-beautify is loaded as a static script from a CDN; everything runs in your browser.
About CSS beautification
Beautification is the inverse of minification. Where a minifier strips whitespace and merges rules, a beautifier puts indentation and line breaks back in for human readability.
What this tool does
- Indents declarations inside each rule
- Puts each declaration on its own line, terminated with a semicolon
- Optionally puts each selector in a comma-separated group on its own line
- Adds blank lines between rules (configurable)
- Preserves comments verbatim
What it doesn't do
- Sort declarations alphabetically. Order is preserved.
- Reorder selectors within a group. Original order is preserved.
- Validate property names. Garbage in, garbage out (formatted nicely).
- Add vendor prefixes. Use Autoprefixer / PostCSS for that.
Powered by css-beautify
The transformation engine is the CSS half of js-beautify — battle-tested in VS Code, dozens of editor plugins, and many other tools.