CSS beautifier
Paste CSS that was minified, copied from DevTools or written in a hurry, and get it back laid out the way people read it. Only whitespace changes, so the styles behave exactly as before.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Paste your CSS into the left box.
- Pick the indent: 2 spaces, 4 spaces or a tab.
- Copy the result. If a brace or a string is broken, you see the line and column instead.
- Puts every declaration on its own line as
property: value; and adds the semicolon after the last one.
- Writes
{ after the selector with one space, and } on its own line. An empty rule becomes a {}.
- Puts each selector of a comma list on its own line, and puts spaces around the combinators
>, + and ~.
- Writes
!important with a space before it.
- Indents rules inside
@media, @supports, @keyframes and nested rules.
- Leaves strings, comments and
url(...) untouched, so a ; or } inside them never splits the code.
Example
a:hover,a:focus{color:#c00!important}
becomes
a:hover,
a:focus {
color: #c00 !important;
}
Good to know
Whitespace between the parts of a value is collapsed to one space, so a value that you wrapped over several lines ends up on one line. Text inside parentheses, such as rgba(0,0,0,.5), is kept as you typed it. To go the other way, use a CSS minifier; to format JavaScript, see the JS beautifier.
Frequently asked questions
Does beautifying change how my CSS works?
No. Only the spaces and line breaks between tokens change, plus a missing semicolon after the last declaration of a rule. Selectors, properties, values, strings and comments are kept as written.
Why is a blank line added between some rules but not others?
Rules are separated by one blank line at every level, and a nested rule gets a blank line when it follows declarations. Declarations inside one rule, and consecutive @import lines, stay together.
Does it check that my CSS is valid?
Only the structure. It reports unbalanced braces or parentheses and strings or comments that never end, with line and column. It does not know which property names or values are allowed.
Can it format CSS with nesting, like .a { &:hover { } }?
Yes. Any block inside a block is indented one level deeper, whether it is a nested rule, an @media inside a rule, or @keyframes steps.
Is my code uploaded anywhere?
No. The formatting runs in your browser, so stylesheets with private class names or unreleased designs stay on your device.