CSS Formatter and Minifier

Paste a whole stylesheet or a single rule. The output updates as you type.

1. Paste your CSS into the Input box, or press Paste. A minified production bundle or a few rules copied from dev tools both work, and Try it loads a short example.
2. Set Mode to Beautify for one declaration per line, or to Minify to strip comments and whitespace.
3. Choose the Indent: 2 spaces, 4 spaces or Tab. It only affects Beautify.
4. Read the status line. It says "Beautified", or for Minify it shows the length before and after and the percentage saved.
5. Press Copy or Download .txt, then rename the download to .css. Use as input moves the result back into the input box.

Beautify uses the js-beautify library in your browser. The stylesheet is never uploaded, which matters for unreleased designs and client work.

Beautify changes layout, not content. The example a{color:red;margin:0} becomes a selector line, two indented declarations with a space after each colon, and a closing brace on its own line. Selector lists are split so each selector sits on its own line, and rules inside @media and @keyframes are indented one level deeper, with blank lines between them. Simple nesting written in the style of SCSS or LESS is indented the same way.

Declarations are kept as written. A last declaration without a semicolon, like margin: 0 above, does not get one. Property order, vendor prefixes, shorthand values and comments are all preserved, and colours are never rewritten, so #FFF stays uppercase. A space is added before !important. Text you typed inside a media query or a selector, such as (min-width:600px) or .b>p, is left as it was typed, so tidy spacing there is your job.

Minify removes comments, line breaks and indentation, takes the spaces from around braces, colons, semicolons, commas and the symbols >, ~ and +, reduces other runs of whitespace to one space and drops the last semicolon in each block. The rule a { color : red ; margin : 0 ; }, which is 32 characters, comes out as a{color:red;margin:0} at 21, a saving of 34 percent.

It works by matching text patterns, not by understanding the stylesheet, so look at the output when your CSS contains any of these:

• calc() with a plus sign. calc(100% + 10px) becomes calc(100%+10px), which is not valid, because calc needs spaces around plus and minus.
• Strings with spaces or commas. content: ", " becomes content:",", and two spaces inside a string collapse to one.
• A space before a colon in a selector. .a :hover becomes .a:hover, which selects a different thing.

It also does not shorten colours, merge selectors or remove unused rules. A build step with cssnano or Lightning CSS is the right route for shipping stylesheets, while this tool suits quick embeds and email templates.

Most CSS you meet in the wild is not in the shape it was written. Framework bundles, theme files and anything pulled from a production site arrive minified, and the fastest way to understand a selector is to expand the file and search it.

• Beautify a minified theme or plugin stylesheet to find the rule that overrides yours.
• Expand CSS copied from the browser Styles panel before pasting it into a project.
• Normalise formatting across files written by different people before a review.
• Compare two versions in the diff checker after beautifying both with the same indent.
• Check a colour value with the colour picker, which converts between hex, RGB and HSL.

If the stylesheet sits inside a page, the HTML formatter tidies style blocks together with the markup. Scripts that add classes at runtime are covered by the JavaScript formatter.

A habit that works well is to edit the beautified file and produce the minified copy only when you publish. Because Minify drops every comment, a licence notice at the top of a file has to be added back by hand.