Skip to content
ToolForge
Open menu
Developer Tools

CSS Minifier

Minify CSS online. Remove comments and whitespace, shorten colours and units, merge duplicate rules, and check the savings. Level 2 optimisations are optional.

Free, no sign-upRuns in your browserNothing uploaded

Press Minify to see the result.

input
325 B
output
0 B
saved
-
after gzip (est.)
-

The estimated compressed figure matters more than the raw one. Gzip and Brotli already squeeze whitespace and repeated tokens, so a 40% raw reduction is usually only a few percent once the file is compressed. Minify anyway, but judge it on the compressed number.

CSS minification removes comments and the whitespace around selectors and declarations, and rewrites values into their shortest equivalent form: #FFFFFF becomes #fff, 0px becomes 0, 0.5 becomes .5, and margin: 0 0 0 0 collapses to margin: 0. On production stylesheets that is typically 20 to 40% off the raw file.

The output uses clean-css, a battle-tested minifier that understands the CSS grammar rather than pattern-matching it, so it will not break a string containing a brace or mangle a custom property. Higher-level optimisations such as merging structurally identical rules and removing overridden declarations are available as opt-ins, and each one is a separate step because that class of transform is where minifiers occasionally disagree with browsers.

As with any minifier, the meaningful number is the compressed size. Gzip and Brotli handle whitespace and repeated tokens well, so a 30% raw reduction often becomes only 2 to 5% after compression. Minify, then compare the compressed sizes, and do not skip brotli because of it.

CSS Minifier features

Grammatical minification
A parser-based minifier, so braces inside strings, custom properties and unusual at-rules are handled correctly.
Safe by default
Comments, whitespace, redundant units, long hex colours and semicolons are removed. Nothing structural happens unless you ask.
Optional level 2 optimisations
Merge identical rules, drop overridden declarations and collapse short rules - each labelled with what it changes.
Vendor prefix handling
Optional prefix removal that understands which prefixes are genuinely needed by your browser targets rather than deleting them all.
Custom property support
CSS variables are preserved and their values minified safely, rather than being dropped by a naive minifier.
Savings against compressed size
Reports the raw reduction and the estimated compressed reduction, because those are very different numbers.

How to use the CSS Minifier

  1. Paste your CSS

    Type or paste, or drop a .css file onto the editor.

  2. Choose the level

    Level 1 is safe and predictable: comments and whitespace gone, values shortened. Level 2 additionally merges identical rules and drops overridden declarations. Advanced restructuring rewrites selectors and can change cascade behaviour - leave it off unless you verify the result.

  3. Compare the output

    Raw and compressed sizes, percentage saved and the list of optimisations applied are all reported.

  4. Copy or download

    Copy the minified CSS or download it as a .css file, then reload the page and check for visual regressions.

Frequently asked questions

Is it safe to minify CSS?

The default options are. They remove comments and whitespace and shorten values without changing behaviour. The risk is in the advanced restructuring options, which can rewrite selectors and rely on subtle cascade rules. If you enable those, diff the output and load the page in a browser before shipping.

Why is my minified CSS only slightly smaller once compressed?

Because gzip and Brotli already exploit repeated whitespace and repeated tokens. The raw saving on a 60KB stylesheet might be 20KB, while the compressed saving is often 1 to 3KB. Minify anyway, but judge it on the compressed number.

Should I delete my source map after minifying?

No. Ship the minified file with its source map alongside it, and add sourceMappingURL to the file. The map is only downloaded when devtools is open. Removing it means production stack traces point into the minified bundle.

What do the optimisation levels actually do?

Level 1 is formatting: comments, whitespace, unit and colour shortening. Level 2 additionally merges rules with identical declaration blocks and removes declarations overridden later in the same rule. Advanced restructuring goes further and merges selectors, which is where cascade subtleties start to matter.

Does it handle CSS custom properties?

Yes. Variables are preserved with their values minified safely, which is not true of every minifier and is a common source of broken themes.

Can I minify SCSS or Less?

Not directly. Those need compiling first, since nesting, variables and mixins are not valid CSS. Compile to CSS, then minify the output.

Related tools

HTML MinifierStrip HTML comments and whitespace and see the byte savings instantly.OpenJavaScript MinifierMangle names and compress JavaScript with terser, entirely in your browser.OpenCSS Previewer & Design PlaygroundPaste CSS and watch it render. Build gradients and shadows by dragging.Open

Every tool, in one place

ToolForge has css minifier plus a growing set of image, colour and developer tools. All of them run locally in your browser, free and without an account.

Browse all tools