CSS beautifier
Paste minified or messy CSS and get neatly indented code: one property per line and every rule block on its own. Nothing changes except the whitespace.
How it works
-
Paste your code
Paste the code in the left box or open a file. No code to hand? Click Example.
-
Instant result
The result appears as you type. If there is an error, you see the line and character.
-
Copy or download
Copy the result with one click or save it as a file for your editor or project.
When do you need it?
Stylesheets from a website are often minified: everything on one line to save bytes. That is great for loading speed but impossible to read. The beautifier puts every selector, property and closing brace on its own line, and indents nested blocks such as @media queries.
Options
- Indent: 2 spaces, 4 spaces or a tab.
- Blank line between rules makes long stylesheets easier to scan.
Formatting is done with js-beautify, which runs in your browser. Strings, url() values and calc(100% - 2rem) keep their exact spacing. The opposite, making CSS as small as possible, is the CSS minifier.
Frequently asked questions
Is the CSS beautifier free?
Yes. The CSS beautifier is completely free, with no account, sign-up or usage limit.
Is my code stored?
No. Your code is processed in your browser and is not sent to a server or stored.
Does it work on my phone?
Yes. The tool works in any modern browser on a phone, tablet or computer.