CSS Minifier – Minify & Compress CSS Online Free

Minify CSS safely, right in your browser

The CSS Minifier shrinks stylesheets by removing everything a browser does not need — comments, indentation, line breaks, the last semicolon in each rule, redundant zero units and long hex colours — while keeping the meaning of your CSS exactly the same. Paste a stylesheet or load a .css file and the minified version appears instantly, together with the original size, the new size, the percentage saved and an estimate of the gzipped size.

Many quick minifiers are a handful of regular expressions, and they break real-world CSS: they strip /* … */ inside a content string, delete the spaces that calc() needs around + and -, or turn .nav :hover into .nav:hover, which selects something different. This tool reads your CSS with a proper tokenizer that understands strings, comments, url(), escapes, at-rules, custom properties and nested rules, so it only removes characters it can prove are unnecessary.

It is free, needs no account and runs entirely on your device, so private or unreleased stylesheets never leave your computer.

How to use the CSS Minifier

Paste your stylesheet into the CSS to minify box, drop a .css file onto it, or press Load file.
Pick your options: keep /*! comments, shorten numbers, use short hex colours, remove empty rules, or put one rule per line.
The Minified CSS box updates as you type. Press Minify CSS to run it again at any time.
Read the size panel for the original size, minified size, percentage saved and gzip estimate. If the CSS has an error, the line and column are shown above the output.
Press Copy to put the result on your clipboard, or Download .css to save it as a .min.css file.

CSS Minifier features

A real tokenizer, not find-and-replace

Strings, comments, url(), escapes, at-rules and nested rules are parsed properly, so nothing inside a string or URL is ever altered.

calc() and selectors stay correct

Spaces around + and − in calc(), and meaningful descendant spaces such as .nav :hover, are kept wherever removing them would change the result.

Custom properties left alone

Values of --variables are only trimmed and collapsed, because they may later be substituted into calc() where 0px and 0 are not interchangeable.

Licence comments kept

Comments that start with /*! are preserved by default, so MIT and other licence notices survive minification.

Precise error messages

An unclosed string, comment, bracket or block is reported with its line and column instead of silently producing broken output.

Size and gzip estimate

See the bytes before and after plus an estimated gzip size, measured with your browser’s built-in CompressionStream.

What the minifier changes

Everything not listed here — strings, url() contents, selectors, keyframe percentages, @layer order, percentages such as 0% and times such as 0s — is copied exactly as you wrote it.

Optimisation	Example	When it is applied
Remove comments	`/* header */` → removed	Always, except /*! comments while “Keep” is ticked
Collapse whitespace	`a > b , c { … }` → `a>b,c{…}`	Only next to characters where a space can never matter
Drop the last semicolon	`color:red;}` → `color:red}`	Always
Remove zero units	`margin: 0px` → `margin:0`	Plain lengths outside calc(), var(), flex and custom properties
Trim number zeros	`0.50em` → `.5em`	Numbers in declaration values
Short hex colours	`#ffffff` → `#fff`	Six-digit colours made of three pairs, except in old IE filters
Remove empty rules	`.unused { }` → removed	Empty style rules and empty @media, @supports and @container blocks

Why some “obvious” optimisations are skipped

A minifier is only useful if you can trust it blindly. These shortcuts look harmless but can break a site, so this tool deliberately leaves them out:

0% and 0s keep their units. A keyframe selector must be written 0%, hsl() needs the percent sign on saturation and lightness, and a transition duration of plain 0 is invalid in some contexts.
Zeros inside calc() keep their unit. calc(0px + 10px) is valid, but calc(0 + 10px) is not, because a unitless number cannot be added to a length.
The flex basis keeps its unit. In flex: 1 1 0px the unit makes it unambiguous that the last value is a basis, and some older browsers misread the unitless form.
Empty @layer blocks stay. @layer base {} looks useless, but it fixes the order of cascade layers for the rest of the file.
A space before a bracket stays. In @media screen and (max-width: 600px), deleting the space after and would turn it into a function called and( and the media query would stop matching.

Minify, compress, or both?

Minification and HTTP compression work together. Minifying removes characters permanently; gzip or Brotli, applied by your web server or CDN, then compresses what is left while it travels over the network. A typical hand-written stylesheet shrinks by roughly 15–35% when minified, and its gzipped size drops a little further because there is less text to compress. Comments, generous indentation and long hex colours give the biggest wins.

Keep your readable CSS in source control and publish the minified copy, for example as style.min.css. If you ever need to read a minified file, the Code Beautifier will re-indent it. For the rest of your front end, use the JS Minifier and the HTML Minifier.

CSS Minifier FAQ

Is this CSS minifier free and private?

Yes. It is free with no limits or sign-up, and minification runs in your browser. Your stylesheet is never uploaded to a server.

Will minifying CSS break my website?

It should not. The minifier only removes characters that cannot change how CSS is parsed, and it stops with an error instead of guessing when it meets a broken string, comment or bracket. As with any build step, check the minified file on a test copy of your site before you deploy it.

How much smaller will my CSS get?

It depends on how the file is written. Heavily commented, neatly indented stylesheets often shrink by 20–40%, while files that are already compact may only lose a few percent. The size panel shows the exact saving for your file.

Why are /*! comments kept?

By convention, comments that start with /*! hold licence or copyright notices that must stay with the code. Untick “Keep /*! comments” if you want them removed as well.

Does it support SCSS, Less or Tailwind?

It minifies standard CSS, including modern features such as custom properties, native nesting, @layer, @container and compiled Tailwind output with escaped class names like .md\:flex. SCSS and Less features such as $variables and mixins must be compiled to plain CSS first.

Can I un-minify CSS later?

Minification throws away comments and formatting, so the original layout cannot be restored exactly. You can re-indent minified CSS with the Code Beautifier, but keep your source file for editing.