CSS beautifier
Beautify CSS in your browser: nothing is uploaded, there is no limit on the size, and minified or messy stylesheets become readable, indented code. Only the whitespace changes.
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.
Debugging a stylesheet you did not write
Open a website's CSS in the browser tools and it is often one long line. Paste it here to see the rules in order, find which selector wins and spot the !important that is causing trouble. The browser's own style inspector also shows the formatted file, but this page lets you copy, search and edit the result.
What the formatter does not change
The order of rules, the values and the selectors are exactly as in the original, so the cascade does not change. Comments stay in the output. If a minifier shortened colours or removed units from zero values (0px to 0), those changes stay as well, because they are part of the code, not whitespace.
From readable back to small
Keep the formatted CSS for editing and generate a small version for production with the CSS minifier. If you are comparing the two versions, formatting both with the same indent first makes the differences easy to see.
Frequently asked questions
Does beautifying change how my CSS works?
No. Only whitespace between rules, selectors and properties is changed.
Can it undo minification completely?
It restores the layout, but not the original comments if they were removed, and not the order of properties in your source files.
Does it handle @media queries?
Yes. Nested blocks such as @media and @supports are indented one level deeper.
Is my CSS uploaded?
No. The formatting runs in your browser and the code stays on your device.