# CSS minifier

URL: https://shahid09.is-a.dev/tools/css-minifier/
Author: Muhammad Shahid (https://shahid09.is-a.dev/)
Free tool · runs in your browser

Shrink your CSS by removing comments and whitespace and shortening values, without changing how it works.

**Quick answer:** Paste your CSS to get a minified version, with the bytes saved shown. It removes comments and whitespace and shortens values, so #ffffff becomes #fff and 0px becomes 0, using the proven CSSO engine. An optional setting also merges rules for a smaller file, which is worth a quick check on the page. Your code stays in your browser.

## How to use it

1. **Paste your CSS.** It is minified as you type.
2. **Choose the options.** Turn on rule merging for a smaller file, or keep licence comments.
3. **Copy the result.** Check the savings, then use the CSS in production.

## Example

Whitespace goes, and #ffffff and 0px are shortened:

Input:

```
body {
  margin: 0px;
  /* page colour */
  color: #ffffff;
}
```

Output:

```
body{margin:0;color:#fff}
```

## Common errors and how to fix them

- **My styles changed after merging**: Turn off "Merge rules". Rule order matters in some cascades.
- **Could not read this CSS**: A bracket or quote may be unbalanced. Check near the line reported.

## Frequently asked questions

### What does minifying CSS do?

It removes what browsers do not need, such as comments, whitespace and repeated values, and writes values in shorter forms. Styling stays the same.

### How much smaller will my CSS get?

Often 20 to 50%, depending on how many comments and how much whitespace it has. The tool shows your exact saving.

### Is minifying the same as gzip?

No, and you should use both. Minifying removes unneeded text, and then gzip or Brotli on your server compresses what is left.

### Can minification break my CSS?

Basic minification is very safe. "Merge rules" moves rules around, which can occasionally change the result where order matters, so check the page.

### Should I keep my original file?

Yes. Edit the readable version and minify it for production, because the minified file is hard to read.

### What are /*! comments?

Comments marked with an exclamation mark, usually licence notices. Turn on "Keep /*! licence comments" to keep them.

### Does it support modern CSS?

It handles current syntax, including custom properties, grid and media queries. Native nesting is passed through with light compression.

### Is my code uploaded?

No. It is minified in your browser.

### Should I minify JavaScript too?

Yes, for the same reason. Use the [JavaScript minifier](https://shahid09.is-a.dev/tools/javascript-minifier/), and tidy your markup with the [HTML formatter](https://shahid09.is-a.dev/tools/html-formatter/).

### Can I turn minified CSS back into readable code?

The layout can be restored by a formatter, but comments removed here are gone, so keep your original file.

## Related

- [JavaScript minifier](https://shahid09.is-a.dev/tools/javascript-minifier/)
- [HTML formatter](https://shahid09.is-a.dev/tools/html-formatter/)
- [Color converter](https://shahid09.is-a.dev/tools/color-converter/)

## Sources

- [MDN: Minification](https://developer.mozilla.org/en-US/docs/Glossary/Minification)
- [CSSO](https://github.com/css/csso)