CSS

CSS Formatter and Minifier stylesheet

Beautify CSS with indentation, or minify it by stripping comments and unnecessary whitespace.

mode
indent β€”
INPUTcss
0 lines 0 chars
1
OUTPUTformatted
0 lines 0 chars
1
Tool Guide

What this tool does

Stylesheets served in production are usually compressed onto a single line, with whitespace and comments removed to save bandwidth. In that state it is hard to see which selectors carry which declarations.

Beautify splits the input at braces and semicolons and indents according to nesting depth, so nested blocks such as media queries line up correctly. Minify does the reverse, dropping comments and collapsing whitespace into one line.

String literals, url() values, and comments are protected before whitespace is touched. That prevents spaces inside a content declaration or a filename containing spaces from being destroyed during collapsing.

When to use it

Use it to analyse a compressed stylesheet from a live site, to tidy CSS copied out of developer tools while tracking down a rule, to shrink styles that will be inlined, or to normalise indentation across CSS written by several people.

Input and output examples

Input .card{color:#fff;padding:12px}@media (max-width:600px){.card{padding:8px}}
Output .card { color: #fff; padding: 12px } @media (max-width:600px) { .card { padding: 8px } }

Rules inside a media query gain an extra indentation level.

Input /* comment */ .a{color:red}
Output .a{color:red}

Minify removes comments.

Notes and limitations

CSS rules are order-dependent for specificity. This tool never reorders declarations and only adjusts whitespace, but take care that pasting the result does not move rules relative to each other. It is not a validator either, so misspelled properties pass through unchanged. Verify the rendered page before shipping minified output.

Frequently asked questions

Are spaces inside url() preserved?

Yes. Strings and url() values are protected before whitespace collapsing and restored afterwards, so their contents survive intact.

Does it report syntax errors?

No. It only adjusts whitespace, so typos in property names or values must be found in browser developer tools.

Copied