CSS Formatter and Minifier

How to format or minify CSS

1. Paste your stylesheet, or click Open a file to load a .css file (up to 10 MB).
2. Choose the Indentation (2 spaces, 4 spaces or a tab) and whether you want a Blank line between rules.
3. Click Format (beautify) to get readable code, or Minify to get the smallest version.
4. For minification, keep Merge rules when minifying ticked for the best result, and Keep /*! comments */ ticked to preserve license headers.
5. Copy or download the result. The status line shows the size before and after, in bytes, and the percentage saved.

If a brace is missing, the tool stops and tells you on which line the unclosed { or the extra } is, instead of producing broken output.

Beautify: readable, consistent CSS

Format (beautify) uses js-beautify, the formatter found in many code editors. It puts every declaration on its own line, indents the content of each rule and of at-rules such as @media and @supports, writes each selector of a group on its own line, and adds a space after the colon of each declaration. Existing blank lines are kept (at most one in a row), so the logical sections of your file stay visible. The formatter never changes values, the order of rules or the meaning of selectors: it only changes whitespace.

This is useful to read minified CSS from a website, to review a stylesheet generated by a tool, or to clean up a file edited by several people with different habits.

Minify: smaller CSS with csso

Minify uses csso (CSS Optimizer), a structural minifier. Beyond removing whitespace and comments, it rewrites the stylesheet into an equivalent, shorter form:

• colors are shortened (#ff0000 becomes red, #ffffff becomes #fff);
• units and zeros are simplified (0px becomes 0, 0.5em becomes .5em);
• duplicate declarations are removed and shorthand properties are merged when it is safe;
• with Merge rules when minifying, rules with identical declarations are grouped (a{color:red} b{color:red} becomes a,b{color:red}) and overridden declarations are dropped.

Restructuring is safe for normal stylesheets, but it moves declarations. If your CSS relies on a very specific cascade order, for example browser hacks, untick the option: csso will then only compress each rule in place.

Comments are removed, except “important” comments that start with /*!, which are commonly used for licenses. Untick Keep /*! comments */ to remove them as well.

Size before and after

The status line compares the size of the input and of the result in UTF-8 bytes. Beautified code is usually larger than the original; minified code typically saves 20 to 50 % on hand-written CSS. Remember that servers also compress files with gzip or Brotli, so the transfer saving is smaller than the raw figure, but minification still reduces parsing time and the size of cached files.