CSS Minifier

How to use it

1. Paste your CSS, open a .css file, or start from the sample.
2. The minified CSS appears as you type, with the size before and after.
3. Copy it or download it as styles.min.css.

What it does

The CSS Minifier uses CSSO, which goes beyond removing whitespace and comments:

• Shortens values: #ff0000 becomes red, 0px becomes 0, and padding: 0 16px 0 16px becomes padding: 0 16px.
• Merges rules with the same selector, and selectors with the same declarations.
• Removes declarations that a later one in the same rule overrides.

It only makes changes that keep the stylesheet's meaning, so pages look the same.

Is it worth it?

Stylesheets block the page from showing until they've loaded, so smaller CSS means a faster first paint. Minifying typically saves a further 5 to 15% on top of the gzip or Brotli compression your host applies, more when the stylesheet has a lot of comments. If you use a build tool such as Vite, it already minifies CSS for production; this page is for stylesheets you write and ship by hand.

Frequently asked questions

Can minifying break my CSS?

CSSO's changes keep the meaning of valid CSS. Hacks that rely on invalid syntax for old browsers may not survive. Keep the readable version as your source and minify a copy.

Does it remove unused CSS?

No: it can't see which selectors your pages use. Tools like PurgeCSS do that during a build.

How do I get the readable version back?

Keep the original. The CSS Formatter re-indents minified CSS, but comments are gone for good.

Is my CSS uploaded?

No. It's minified in your browser.