How to beautify CSS with this tool
- Paste your stylesheet into CSS input, or click Open file to load a .css, .scss or .less file. The page opens with a one-line example so a result shows straight away.
- Pick Indent (2 spaces, 4 spaces or tab).
- Keep One selector per line ticked to split a group such as
h1,h2,h3onto three lines. Keep Blank line between rules ticked to separate rules. Keep Add the last semicolon ticked to restore the semicolon that minifiers drop before a closing brace. - Read the result in Beautified CSS, then use Copy or Download.
How the formatting works
Formatting is done by the open source js-beautify library (version 2.0.3, MIT licence), which runs in your browser. It reads the stylesheet as tokens instead of splitting on every colon or semicolon, so the colon in a:hover, the one in url(https://...) and the semicolons inside a data URI or a quoted string are never treated as the end of a declaration. Each declaration goes on its own line, and every level inside a rule, @media block or nested rule is indented once more. The last-semicolon step is separate code that adds the optional semicolon the CSS syntax rules allow you to leave out after the final declaration, and it skips comments.
Worked example
With the default settings (2 spaces, all three boxes ticked) the example input
body{font-family:sans-serif;margin:0;padding:20px}.box{color:#333;background:#fff;border:1px solid #ccc}.box:hover{background:#f5f5f5}@media (max-width:600px){.box{padding:10px}}
becomes
body {
font-family: sans-serif;
margin: 0;
padding: 20px;
}
.box {
color: #333;
background: #fff;
border: 1px solid #ccc;
}
.box:hover {
background: #f5f5f5;
}
@media (max-width:600px) {
.box {
padding: 10px;
}
}
The status line reads "Formatted: 21 lines, 237 characters.". The :hover selector and the media query come through unchanged, and each rule ends with a semicolon.
Limits and edge cases
- The tool formats, it does not validate or repair. A missing brace or a misspelled property is formatted as written, and values, colors and rule order are never changed.
- Comments are kept with their text untouched. Values keep their meaning and only get standard spacing, such as a space after each comma in
rgba(59, 130, 246, .5). - SCSS and Less nesting, variables, mixins and // comments format sensibly, but nothing is compiled, and interpolation such as
#{$gap}can lose a space after a colon. - Whitespace inside a custom property value that contains braces can change. This is rare, so check any custom property that holds a block of declarations.
- Files up to 5 MB open with Open file. Above about 500,000 characters, click Beautify instead of waiting for live formatting.
- The first use downloads about 21 KB of formatter code from cdnjs. Your CSS is never sent anywhere.
Frequently asked questions
Does beautifying CSS change how my page looks?
No. Only whitespace, line breaks and the optional last semicolon change, so a value such as rgba(59,130,246,.5) becomes rgba(59, 130, 246, .5) with the same meaning. Selectors, quoted strings, url() addresses and the order of your rules stay as they were.
How do I make minified CSS readable?
Paste the minified stylesheet, or open the file, and the formatted version appears at once with one declaration per line. Comments that the minifier removed cannot be restored.
Can I beautify SCSS or Less here?
Yes, as plain formatting. Nested rules, variables and mixins are indented, but the code is not compiled to CSS, and a few constructs such as #{} interpolation may need a quick check afterwards.
What is the difference between a CSS beautifier and a CSS minifier?
A beautifier adds indentation and line breaks so people can read and edit the stylesheet. A minifier removes them so the file downloads faster. Keep a beautified copy to work on and minify the version you publish.
Ready to ship? The CSS minifier compresses a stylesheet again. The HTML beautifier and JavaScript beautifier format the other two web languages.
Sources: js-beautify 2.0.3 (github.com/beautifier/js-beautify); W3C CSS Syntax Module Level 3.