Format and minify CSS online

How it works

1. 1

   Paste your CSS into the Input box.

2. 2

   Choose the indent.

3. 3

   Press Format or Minify.

4. 4

   Copy the output.

About the CSS Formatter

Stylesheets pulled from a production site are often minified into one line, and hand-written CSS drifts into mixed styles over time. This formatter puts every selector, declaration and closing brace on its own line with consistent indentation, including inside nested blocks such as media queries. Its Minify mode does the opposite and also removes comments, giving you a compact stylesheet to paste elsewhere.

What you can do

• Format rules so each declaration sits on its own indented line, using 2 spaces, 4 spaces or tabs.
• Indent rules inside @media, @supports and other nested blocks one level deeper.
• Minify a stylesheet: whitespace around braces, colons, semicolons and commas is removed, the final semicolon before a closing brace is dropped, and comments are stripped.
• Keep comments when formatting, each on its own line.
• Protect quoted strings, such as font names and content values, from any change.

When it works best

• Reading the minified CSS of a site to see how a component is styled.
• Tidying a stylesheet before committing it, when the project has no formatter set up.
• Shrinking a small block of CSS for an inline style tag or an email template.

Things to know

• All processing is local to your browser.
• It formats plain CSS. Preprocessor syntax such as Sass mixins or Less variables may format acceptably but is not specifically understood, and nothing is validated.
• Minify only removes whitespace and comments; it does not merge rules, shorten colours or drop unused selectors, so savings are modest compared with a build tool.
• For HTML or JavaScript, use the HTML Formatter or JavaScript Formatter.

Frequently asked questions