Are @import statements resolved?

No. Because the tool runs in the browser it does not download remote files and leaves @import statements as they are. If you want combined output, concatenate the files yourself first.

Does minifying CSS really speed up a page?

CSS is a render-blocking resource; its size directly delays first paint. With minification and gzip combined, the file often shrinks to a quarter of the original and Largest Contentful Paint improves.

Step 02 — CSS

Minify CSS with clean-css 5

Q: What is the difference between level 1 and level 2?

Level 1 cleans each rule on its own: it strips whitespace and shortens colors and units. Level 2 looks at the whole file; it merges rules sharing a selector and drops overridden properties. Level 2 saves more but can cause visual differences in code that relies on selector order.

Q: Is it safe for old browsers?

When you set compatibility to IE9 or IE8, clean-css skips transformations that would break those browsers. Leave the default mode for modern projects.

Paste or drag your stylesheet. At level 2 clean-css does more than strip whitespace; it merges duplicate selectors and drops overridden properties. Everything happens in your browser.

Loading engine…

Choose file

Source

0 B

Minified

clean-css options

Optimization level Compatibility Comments Restructure rules restructureRules Merge media queries mergeMedia Beautify output format

Remote @import statements are not downloaded and stay as they are in the output. Level 2 can change selector order, so eyeball the output once before shipping.

— smaller · run the minifier

Source—

Output—

Saved—

After gzip—

Time—

How it works

The way to a smaller stylesheet

1 · Provide one file

Paste your compiled output (Sass, Less or handwritten CSS). If your setup is split with @import, concatenate first; the tool does not download remote files.

2 · Pick your level

Level 1 never changes what a rule means. Level 2 looks at the whole file and saves much more; if you rely on order-sensitive hacks, test the output once.

3 · Ship it

Download as .min.css and keep gzip or brotli enabled on your server. The gzip row in the gauge shows the size your users will actually download.

Reference

What does level 2 change?

Transformation	What it does	Risk
`mergeAdjacentRules`	Collects consecutive rules with identical bodies into one selector list.	Next to none.
`mergeMedia`	Merges `@media` blocks that share the same condition.	Careful with code that relies on block order.
`restructureRules`	Moves properties between rules to reduce repetition.	Specificity order can change; test it.
`removeUnusedAtRules`	Deletes unused `@font-face` and `@keyframes` definitions.	Careful with animation names generated in JS.
`overrideProperties`	Drops properties overridden later in the same rule.	Can break browser hacks.

At level 1, colors collapse to short form (#ffffff → #fff), zero units are dropped, and redundant semicolons and whitespace disappear. None of these ever change how the page looks.

Frequently asked

FAQ

What is the difference between level 1 and level 2?

Level 1 treats each rule on its own and the output is visually identical. Level 2 looks at the whole file, merges rules and drops overridden properties. The savings grow noticeably; in return, review the output once.

Are my @import statements resolved?

No. The tool runs in your browser and makes no outbound requests; @import statements stay as they are in the output. If you want a single-file result, concatenate the files first.

Is it safe for old browsers?

When you pick IE9 or IE8 compatibility, clean-css skips the transformations that break those browsers. For a modern project, leave the default mode.

Does my code go to a server?

No. clean-css is downloaded into your browser and minification runs inside a Web Worker on your device. The stylesheet you paste is never sent anywhere.

Does minifying really make pages faster?

CSS is a render-blocking resource: the browser will not paint the page before downloading and parsing it. Minification plus gzip often shrinks the file to a quarter, which shows up directly in first paint time.

You have scripts tooMinify the JavaScript side with UglifyJS 3: compress, mangle, drop_console and gzip measurement in the same interface.

Go to the JS Minifier →