CSS Minifier

How it works

Paste your stylesheet into the left panel and the minified version appears on the right straight away. First everything a browser does not need is removed: line breaks, indentation, trailing semicolons and /* ... */ comments. Then values are shortened: #ffffff becomes #fff, 0px becomes 0, 0.50em becomes .5em and bold becomes 700. Full mode goes one step further: two .title rules written one after the other become a single rule, h2 and h3 rules with identical declarations are written once as h2,h3, long forms such as margin: 0px 0px 16px 0px drop to 0 0 16px, and a property written twice inside one rule loses the overridden copy. The sample code on this page goes from 262 bytes to 145 this way, and the result line gives you the same before-and-after count for your own file. Comments starting with /*! are kept by default because many open-source licences require that text to stay in the distributed file. If part of the code cannot be read, such as a brace that is never closed, the rest is still minified, that part is skipped and the result line warns you with the line and column of the first problem.

This tool is also known as css minifier, minify css, css minify online, compress css, css compressor, reduce css file size.

What is Minification?

Minification means removing every character a program does not need while keeping its meaning. For CSS that is indentation, line breaks, comments and last semicolons, plus rewriting values such as #ffffff to #fff. The point is a smaller download: stylesheets block the first paint of a page, so the smaller they are, the sooner visitors see content instead of a blank screen.

What is csso?

csso (CSS Optimizer) is the open-source minifier this page runs. It first parses your CSS into a tree and then applies safe transformations to that tree: shortening values, merging rules with the same selector and removing overridden declarations. That is what separates it from simple search-and-replace minifiers: because it understands the code, it never touches the inside of strings or url(...) values.

Full or safe?

Order matters in CSS: when two rules match the same element, the later one wins. Full mode only merges rules where that order cannot change the outcome, but it may still move a rule's content to an earlier spot in the file. On a modern site with a single stylesheet this is safe and gives the smallest result.

If several stylesheets override each other on your page, or an older theme relies on !important and rule order to hold together, choose Safe: the number and order of rules stay exactly as they were and only the inside of each rule is compressed. You save a few percent less, and there is no risk of a surprise layout change. If you are unsure, try both and open your page once with the minified file.

What minifying does not do

Minifying does not find unused rules. A .old-banner rule that matches nothing on your page is still there after minification, because the tool only sees your CSS, not your HTML. Removing dead rules is the other way to cut a stylesheet, and the Coverage tab in Chrome's developer tools is where you find them.

If your server sends files with gzip or brotli compression, which most hosting does by default, the size that actually travels is much smaller than the numbers shown here. Minifying still helps on top of that, because compression cannot drop comments or rewrite values. Do not edit the minified file: keep the indented source and minify again for each release. If you need to go back, the CSS formatter reopens the file, but removed comments do not come back.

Frequently asked questions

How do I minify a CSS file?

Paste the CSS into the left panel on this page. The right panel shows it on one line with whitespace and comments removed and values shortened. Copy it or download it as a .min.css file; the result line shows how many bytes it went from and to.

Can minifying CSS break my site?

Safe mode does not: the number and order of rules stay the same and only spacing and notation get shorter. Full mode merges rules; that is fine for sites with a single stylesheet, but on older themes where several files override each other it can change the look. Open your page once with the minified file before you publish it.

Why was my licence comment kept?

Comments that start with /*! are the usual way to mark text that an open-source licence requires to stay in the shipped file, so the tool keeps them by default. If the code is your own and you do not need the comment, set the licence comment option to Remove.

Is my code uploaded anywhere?

No. Minification is done by a library running inside your browser; your code never leaves this page and is not sent to any server.