OnlineConverTools
Sign in

CSS Formatter

Beautify or minify CSS

About CSS Formatter

CSS Formatter has two buttons for one stylesheet. Format runs js-beautify, the engine of beautifier.io: one declaration per line, 2-space indentation, at most one blank line kept between rules, and comments and url(data:…) values left intact. Minify runs CSSO: comments (except /*! license comments) and whitespace go, identical rules are merged (a and button with the same declarations become a,button), colors and zero values are shortened. js-beautify and CSSO both run in your browser. Neither one validates: invalid CSS is formatted as it is, and Minify can silently drop what it cannot parse.

Example

Minify: two rules with the same declarations are merged and #ff0000 becomes red.

Input

a{color:#ff0000;margin:0px 0px}
button{color:#ff0000;margin:0px 0px}
/* end */

Output

a,button{color:red;margin:0}

How to format or minify CSS

  1. 1Paste a stylesheet into "Input".
  2. 2Click "Format" for indented CSS, or "Minify" for the compact version.
  3. 3Compare "Output" with your original before replacing it.
  4. 4Click "Copy", or "Download"; the file is named "formatted.css" after either button.

Formats and limits

Input
CSS text, at-rules such as @media included
Format
js-beautify: 2-space indentation, at most one blank line in a row
Minify
CSSO: merges identical rules, shortens colors and zeros, removes whitespace and comments (not /*! ones)
Validation
None: syntax errors are not reported

Where your CSS is processed

Both engines are JavaScript libraries that your browser downloads on the first click; the CSS you paste is processed on your device and is not uploaded. Should an error be displayed, its text is sent to our error log with the tool name and your browser's name and version, after quoted passages, long numbers, and addresses are removed.

Frequently asked questions

Can minifying break my CSS?

No, for valid CSS: CSSO only applies changes that give the same result, such as merging identical rules. Invalid CSS is another matter, because CSSO may drop the part it cannot read without a warning, so check the output.

Does Format change my values?

No. Format only changes whitespace: line breaks, 2-space indentation, and the space after each colon. Strings, comments, and url(data:…) values are kept character for character.

What does Minify remove?

Comments other than /*! license comments, line breaks, spaces, the last semicolon of each rule, and units on zero values; it also turns #ff0000 into red and joins rules that share the same declarations, as in the example above.

Tips and tricks

  • ✓Format a minified third-party stylesheet first to find the rule you need, then edit your own source.
  • ✓For SCSS or LESS, use Code Formatter, which formats both with Prettier.

Related tools