CSS Minifier – Minify & Compress CSS

CSS Minifier – Compress CSS Code with Presets and Live Savings

CSS files grow with comments, indentation and long-hand values that you write for readability but browsers do not need. Since stylesheets block rendering, every unnecessary byte is part of what a visitor waits for. A CSS minifier removes that excess so the file is smaller.

This CSS minifier online gives you three presets, individual switches for each clean-up, a live size comparison, and a breakdown of what is in your stylesheet. It can also do the opposite: the Beautify button re-formats compact CSS so it is readable again.

How to Minify CSS Code

1. Paste your CSS into the left panel, or click Sample to try it.
2. Pick a preset – Standard, Aggressive or Safe – or adjust the checkboxes yourself.
3. Review the output. The minified code appears on the right, with Original, Minified, Reduction and CSS Rules shown at the top.
4. Check the extras. The CSS Analysis card and the Size Comparison bars appear below the editor.
5. Copy or download the result as minified.css.

Results refresh automatically shortly after you type or change an option.

The Three Presets

• Standard – removes whitespace and comments, drops the last semicolon in each block, removes leading zeros (0.5 becomes .5), removes units from zero values, and shortens six-digit hex colors where possible.
• Aggressive – everything in Standard, plus it removes vendor-prefixed declarations such as -webkit-, -moz-, -ms- and -o-.
• Safe – only removes whitespace and comments, leaving values as you wrote them.

A separate switch for removing !important is off in every preset. Turn it on only if you are sure your styles still work without it.

What Gets Shortened

• Comments and whitespace – the bulk of the savings in most stylesheets.
• Last semicolon – color:red;} becomes color:red}.
• Leading zeros – 0.25rem becomes .25rem.
• Zero units – 0px becomes 0 when it directly follows a property.
• Hex colors – #ffffff becomes #fff. If you work with other color formats, the Color Code Converter converts between them.

CSS Analysis and Size Comparison

After minifying, the tool counts selectors, properties, rules, @media queries, CSS variables and !important declarations in your input. It is a quick way to spot a stylesheet with too many overrides. The Size Comparison draws bars for the original and minified sizes, and a rough gzip estimate. Treat the gzip figure as an approximation, not a measured value; your server's real compression result will differ.

Beautify: Going the Other Way

If you receive minified CSS and need to read it, click Beautify. It puts each declaration on its own line with indentation and removes comments. It is meant for readability, so check the result if your CSS contains embedded data such as url(data:...) values, which contain characters that the formatter also splits on.

Things to Check After Minifying

Minifiers work with text patterns, so review the output in these cases:

• calc() expressions. CSS needs spaces around + and - inside calc(). Whitespace removal here also tightens spaces around plus signs, so check any calc() that uses addition.
• Selectors with a space before a pseudo-class. A selector like nav :first-child means something different from nav:first-child. Spaces around colons are removed, so look at selectors written this way.
• Eight-digit hex colors with transparency. The hex shortening step is meant for six-digit colors. If you use values like #ffffff80, turn off Shorten HEX Colors or use the Safe preset.
• Aggressive preset and prefixes. Some prefixed properties are still required in current browsers, for example -webkit-line-clamp or -webkit-background-clip used for gradient text. Removing them changes how the page looks. Use Standard unless you have checked your browser support.
• Quoted text. Repeated spaces inside quoted strings, such as in content values, can be collapsed.

Keep your readable source file and upload the minified copy, then look at the real page in the browsers you support.

Related Tools

If your CSS sits inside a page as a <style> block, the HTML Minifier can compress the whole document in one go. If your stylesheet contains images stored as text, the Base64 Encoder/Decoder lets you inspect them, and the Color Code Converter helps when you need a color in a different format.

Privacy

Your CSS is processed in your browser and is not sent to a server.

Frequently Asked Questions About the CSS Minifier

What does a CSS minifier do?

It removes comments, whitespace and other characters browsers ignore, and can shorten some values, so the stylesheet downloads faster.

Which preset should I use?

Start with Standard. Use Safe if you only want whitespace and comments removed, and Aggressive only if you have checked that you do not need vendor-prefixed properties.

Will minifying change how my site looks?

It should not, but check the cases above, especially calc(), transparent hex colors and prefixed properties.

How do I make minified CSS readable again?

Paste it into the input and click Beautify to get indented, line-by-line formatting. Original comments cannot be restored.

How accurate is the gzip estimate?

It is a rough approximation based on the minified size. Your server's actual compression may be different.

Can I download the result?

Yes. Use Download .css to save the output, or Copy to place it on your clipboard.

Is this CSS compressor free and private?

Yes. It is free, needs no account, and your code stays in your browser.

Reviewed by Kromo Tools Team

Building free, reliable online calculators and utilities for students, professionals, and everyday users. Last updated: