CSS Beautifier & Minifier
Clean up a stylesheet for reading, or shrink it for shipping.
How to use the CSS Beautifier & Minifier
- Drop a .css file on the left panel or paste the stylesheet into it.
- Choose Beautify for readable, indented rules, or Minify for the smallest version that still behaves the same.
- Adjust the indent style, blank lines and selector layout, or decide whether licence comments survive minifying.
- Copy the finished CSS, or download it as a file.
Examples
About this tool
Stylesheets arrive in two unhelpful states: squeezed onto a single line by a build pipeline, or hand-written with inconsistent spacing by several people over several years. The beautify mode normalises either into a predictable layout: one declaration per line, consistent indentation, a space after each colon, combinators written as a > b, and an optional blank line between rules. Nested rules, @media and @supports blocks, @font-face and keyframes are all indented to show their depth.
The minify mode does the opposite with a short, explicit list of changes: comments go (except /*! notices if you want them), whitespace that the grammar does not need goes, and the final semicolon in every block is dropped. It never rewrites numbers, colours or shorthand values, and it copies strings and url() values exactly, so a data URI or a font path cannot be damaged. Before writing anything it checks that every brace, parenthesis and quote is closed and tells you the line and column if one is not, which makes it a handy quick linter for a stylesheet that mysteriously stopped applying.
Tip: when a stylesheet suddenly stops applying after an edit, switch to Minify and read the error. One missing brace swallows every rule after it, and the line and column take you straight to the spot.
Frequently asked questions
Is my stylesheet sent to a server?
It is not. Both modes run as JavaScript in the page you are looking at, so your CSS stays in your browser tab and nothing is logged or stored elsewhere.
Will minifying break my CSS?
The minifier only removes comments and whitespace the CSS grammar does not need, plus the last semicolon in each block. Values, selectors, strings and url() contents are copied as they are. If something in your sheet is malformed, you get an error with the line and column instead of a mangled file.
Does it understand Sass, Less or nested CSS?
Native CSS nesting with & works in both modes. Sass and Less syntax such as // comments, $variables or mixins is not CSS, so compile those first. The minifier points at a // comment with a clear message when it meets one.
Why does the minified output keep a comment?
Comments that start with /*! are conventionally used for licence and attribution text that must stay with the code. Untick "Keep /*! notices */" to remove them as well.
Can I get the minified CSS on several lines?
Yes. Open More options and turn on "One rule per line". Each top-level rule and @-statement then ends with a line break, which makes version control diffs readable at almost no cost in size.