CSS Minifier Online

About CSS Minifier

Minifying removes what browsers do not need, such as comments, line breaks and extra spaces. A careless minifier can also remove what they do: the spaces inside calc(100% - 2rem) are required, and text inside a string or a content value is not whitespace to be cleaned up. This tool makes only changes known to be safe, and it shows you the size saved.

It suits a small site with no build step, a block of CSS going into an email or a page template, or a quick check of what minifying would save. If your project has a build pipeline, a bundler plugin does this and more on each build.

How it works

The CSS is read by a small scanner that splits it into tokens, instead of running search and replace across the whole file. Strings and url() contents are copied exactly. Custom properties such as --gap keep their inner value, because any value can be meaningful to the script or rule that reads it. Spaces around + and - inside calc() and other math functions are kept, since calc(1px+2px) is invalid. The space in a selector like .card :hover stays too, as it means something different from .card:hover.

Comments go, except those starting with /*!, which is the usual way to mark a license. The last semicolon in a block is dropped. Empty style rules are removed, but at-rules stay, since an empty @layer still sets layer order. Colors and decimals are left alone unless you tick the option. The stats show the size before and after, and the gzip figure is measured with your browser's own compressor, so it reflects what a server sending gzip would transfer.

How to use CSS Minifier

1. Paste into CSS, or press Try an example. The result appears in Minified as you type.
2. Choose your options: Keep license comments, Remove empty rules and Shorten colors and decimals.
3. Read the Before, After, Saved and After gzip figures, and any warning.
4. Press Copy or Download.

A real run with Shorten colors and decimals on

/* Header */
/*! MIT license */
.card  >  a:hover , .card .title {
  color : #ffffff ;
  margin: 0.5em 0px;
  width: calc( 100% - 2rem );
  background: url( 'a b.png' );
  --gap:  1rem  ;
}
.empty { }
@media (min-width: 40em) { a { color: red; } }

/*! MIT license */.card>a:hover,.card .title{color:#fff;margin:.5em 0px;width:calc(100% - 2rem);background:url('a b.png');--gap:1rem}@media (min-width:40em){a{color:red}}

/* Header */ and .empty are gone, and the license stayed. The spaces around the minus in calc() and in a b.png survived. 0px stayed as written, as turning it into 0 is not always safe.

When it helps

• Compacting a stylesheet for a small static site with no build tools
• Shrinking a CSS block before pasting it into a page template or CMS field
• Seeing what minifying would actually save once gzip is taken into account
• Finding a missing brace or unclosed comment, which produces a warning

Tips for a better result

• Look at the After gzip figure before spending effort. Servers usually compress CSS already, and repeated whitespace compresses very well, so real savings can be smaller than the Saved figure suggests.
• Keep your readable source and minify a copy. Minified CSS has no line breaks, so it is hard to edit by hand.
• Removing unused rules usually saves far more than minifying, so look at that first if the file is large.
• If the page looks different afterward, check for a warning first. A missing } in your source gets carried into the output.

Good to know

• It does not merge rules, shorten properties, reorder anything or remove selectors your site does not use. It trades some compression for safety.
• #ffffff becomes #fff and 0.5 becomes .5 only with the option on. Color names and 0px are not rewritten.
• It does not compile Sass, Less or other preprocessor code, or add vendor prefixes. Run those first.
• Broken CSS is reported, not repaired: an unclosed block or comment produces a warning and the problem stays in the output.
• There is no source map, so browser developer tools show the minified text.

What to use next

• HTML Minifier: for the HTML that uses this stylesheet
• JSON Minifier: if you also serve JSON data files
• HTML Beautifier: to read compressed markup while debugging