# CSS Minifier

Minify CSS: remove whitespace and comments, shorten values and merge rules safely. See how many bytes you save. Free, in your browser.

Use it at https://lobsite.com/tools/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](https://lobsite.com/tools/css-formatter) re-indents minified CSS, but comments are gone for good.

### Is my CSS uploaded?

No. It's minified in your browser.