CSS Beautifier

Paste CSS or open a .css file, choose the indentation and options, and press Format CSS. Rules, selectors, and properties are counted, and you can switch to Minify to compress the code instead.

Try an example
Mode
The file is read in your browser and placed in the box.

About this CSS beautifier

Minified CSS and stylesheets edited by many hands are hard to read. This beautifier parses your CSS and prints it back in a consistent style: each selector on its own line, one declaration per line with a space after the colon, nested blocks indented, and a blank line between rules if you want one. It understands comments, strings, url() values that contain semicolons, @media, @supports, @keyframes, @font-face, and native CSS nesting. You can also sort properties alphabetically, strip comments, or flip to Minify to squeeze the same code onto one line.

How to format CSS

  1. Add your CSS. Paste CSS into the box, press Open a CSS file, or press an example.
  2. Choose the mode and style. Pick Beautify or Minify, choose Indent with, and tick the options you want, such as Sort properties alphabetically.
  3. Press Format CSS. The formatted code appears with counts of rules, selectors, properties, and lines, and the size before and after.
  4. Copy or download. Press Copy CSS, or Download to save it as a .css file.

Frequently asked questions

Does formatting change how my CSS works?

No. Only whitespace, line breaks, and indentation change. Selectors, properties, and values stay the same, so the page looks identical. Sorting properties can matter when the same property appears twice in a rule, because the later one wins.

Which CSS features are supported?

Ordinary rules, comments, @import and other single-line at-rules, @media, @supports, @layer, @container, @keyframes, @font-face, and native nesting with the ampersand. Strings and url() values are kept exactly as written.

What does minify keep?

Minify removes comments, line breaks, and spaces that browsers do not need, but keeps comments that start with /*!, which are used for licence notes. Use the CSS Compressor for extra savings such as shortening colors.

How are selectors written out?

A list such as a, b gets one selector per line, and the combinators >, +, and ~ get a space on each side. Attribute selectors and pseudo-classes such as :nth-child(2n+1) are left untouched.