Start a project

Tool 37 of 57 · Code

CSS Minifier & Beautifier

Shrink a stylesheet for production or make minified CSS readable again, without breaking strings, URLs or licence comments.

CSS Minifier & Beautifier at a glanceIllustration: 1, Any CSS; 2, processed in your browser; 3, Formatted or minified.CSS Minifier & Beautifier</>1Any CSS3Formatted or minified2In yourbrowser
1 Any CSS 2 processed on your device 3 Formatted or minified

CSS Minifier & Beautifier

Your CSS

Result

CSS

01

What it does

Minifies CSS safely or beautifies it again, keeping strings and licence comments intact.

  • Comments and whitespace removed safely
  • Strings, url() and calc() left alone
  • Colours and zeros shortened
  • Beautify with your indent

02

Private by design

Everything happens in your browser. Nothing you type, paste or upload is sent anywhere, and it keeps working offline once the page has loaded.

03

What you get

Minified or formatted CSS, with a Copy and a Download button on every result.

  • CSS
  • Minify
  • Performance

Why it matters

Every byte of CSS blocks the first paint, because the browser waits for stylesheets before showing the page. Minifying usually removes 15 to 30% of a hand-written stylesheet at no cost.

The reverse is just as useful: when you inherit a site with only a minified stylesheet, beautifying it is the first step to editing it. This tool does both, and won't touch the spacing inside strings or url() values.

How it works

  1. InputA stylesheet
  2. In your browserParsed rule by rule, strings and comments respected
  3. OutputReadable or minified CSS with sizes

Where it fits in a designer's workflow

  1. Plan
  2. Design
  3. Build
  4. Test
  5. Launch
Reading someone else's CSS, then shipping your own.

By the numbers

This site's styles.css, formatted, as shipped and minifiedFormatted (2 spaces): 41.9 KB; Formatted (2 spaces), gzipped: 8.3 KB; As shipped: 36.5 KB; As shipped, gzipped: 9.2 KB; Minified by this tool: 33.9 KB; Minified by this tool, gzipped: 7.9 KBFormatted (2 spaces)41.9 KBFormatted (2 spaces), gzipped8.3 KBAs shipped36.5 KBAs shipped, gzipped9.2 KBMinified by this tool33.9 KBMinified by this tool, gzipped7.9 KB
Measured by running this tool's own formatter and minifier on leej.uk's main stylesheet at build time. Minifying helps most before compression; once gzipped, the difference shrinks to a few per cent. Source: web.dev: minify CSS.
Show the numbers as a table
VersionBytesGzipped
Formatted (2 spaces)42,9388,511
As shipped37,3529,383
Minified by this tool34,7338,086

How to use it

  1. Paste your CSS.
  2. Choose Minify or Beautify and the options.
  3. Check the size saving.
  4. Copy or download the result.

FAQ

Is it safe for production?

Yes for standard CSS: it only removes comments and whitespace and shortens values that mean the same thing. Test the page afterwards, as with any build step.

Why keep /*! comments?

By convention /*! marks a licence notice that must stay with the code, such as for a framework.

Does it remove unused CSS?

No. That needs your HTML. Minifying keeps every rule.

Should I still use gzip or Brotli?

Yes. Minifying and compression work together; most hosts, including Cloudflare, compress CSS automatically.

Work with me

Want a site that gets these right?

I build fast, accessible websites and web apps that pass these checks from day one. Tell me about your project and I'll reply personally with honest next steps.

All developer tools · Back to leej.uk