CSS Minifier

Original CSS

→

Minified CSS

What is a CSS minifier?

A CSS minifier strips everything from a stylesheet that a browser does not need in order to render it. Comments go. So do indentation, line breaks, and the spaces around braces and colons. What comes back is the same set of rules, packed onto one line. The rendered page looks identical. The file is smaller, which means fewer bytes over the wire and a stylesheet that stops blocking the first paint sooner.

The minifier on this page runs on whatever is in the box, updating with every keystroke. It deletes comment blocks, closes up the whitespace around { } : ; , > ~ +, and collapses every remaining run of spaces and newlines into a single space. The final semicolon before each closing brace goes. So do the spaces just inside parentheses, and the unit on a zero that sits immediately after a colon (margin:0px becomes margin:0). Six-digit hex colours whose digits pair up get shortened, so #ffffff comes out as #fff. Each panel shows its byte count, a badge reports how much smaller the result is as a percentage, and Copy Output puts the minified CSS on your clipboard.

When to use it

The audience is anyone shipping CSS without a build step. A brochure site or client microsite, hand-written HTML plus one stylesheet, has no bundler, and nobody is standing up a Node toolchain to squeeze 8 KB out of style.css. On a mostly-text page it is a sizable share of page weight and sits in the critical path, so trimming it is one of the few performance levers available. Paste, copy, upload over FTP or drop it into your host's file manager, done. Small one-off jobs at the edges of a real project fit too: a landing page outside the main app, CSS for a documentation site, a third-party widget stylesheet you edited by hand. If your source is Less, compile it with the Less to CSS tool first and minify its output. This minifier expects real CSS and has no idea what a variable or a mixin is. The JS Minifier handles the script file next to your stylesheet.

The other big case is CSS that lives inside someone else's text box. WordPress themes have an Additional CSS field in the Customizer. Webflow, Squarespace, Shopify, and Framer all have a custom-code panel. HubSpot and Mailchimp templates take inline style blocks, and some of these fields have hard character limits. None of those places run a build pipeline over what you type, so whatever you paste is exactly what ships. Email templates make the case sharper: they need a single compact style block that survives being copied between clients.

How this tool works

The tool makes one pass over your stylesheet, character by character. It keeps track of what it is currently inside: a comment, a quoted string, a selector, a declaration block, or the arguments of a function. For each run of whitespace it then decides whether that whitespace is structural or load-bearing. Comments go. Indentation and line breaks go, along with the space around braces, colons, semicolons, and combinators. The final semicolon in each block goes, a zero directly after a colon loses its unit, and hex colours whose digits pair up are shortened.

Tracking the context is what keeps it safe in the places a plain find-and-replace gets wrong. Inside calc(), min(), max(), and clamp() the spacing is left exactly as written. CSS requires whitespace around + and - there, and removing it invalidates the declaration. A space before a pseudo-class is preserved when it is a descendant combinator, so .card :first-child keeps its meaning and does not silently become .card:first-child. Eight-digit hex colours with an alpha channel shorten to four characters or not at all, never to the five-character fragment that a naive six-digit rule produces. Quoted strings get lifted out before anything else runs and put back afterwards, so a comma, a hash, or a comment marker inside content: "a, b" survives untouched.

It stops at whitespace and does not optimize. Duplicate rules stay duplicated. Selectors nothing on your page uses stay in the file. Declarations are never reordered or merged, longhand properties are never folded into shorthand, and the space before !important is left alone. The zero-unit rule only fires immediately after a colon, so padding:0px becomes padding:0 while padding:var(--pad) 0px keeps its 0px. Expect roughly 15-30% off the character count for typical hand-written CSS. Your server almost certainly gzips or brotlis the file anyway, and compression is already good at repeated whitespace, so the saving after compression is smaller than the badge suggests.

Everything happens locally. The transform is JavaScript working on text you typed into a textarea, right there in the tab. Nothing is uploaded, and no copy of your stylesheet exists anywhere but your own machine. Client CSS under NDA and unreleased design work are as safe here as anything else you keep local.

Examples

A component block with a media query

Input

/* Card component */
.card {
  display: flex;
  padding: 16px 20px;
  margin: 0px;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

@media screen and (max-width: 640px) {
  .card {
    padding: 12px;
  }
}

Output

.card{display:flex;padding:16px 20px;margin:0;border-radius:8px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,0.12)}@media screen and (max-width:640px){.card{padding:12px}}

249 characters down to 174, about 30% off. The comment is gone, margin:0px lost its unit, #ffffff collapsed to #fff, the commas inside rgba() closed up, and both blocks lost the semicolon before their closing brace. The space in 16px 20px survived. Space between values is meaningful, and only the structural characters get tightened.

Custom properties and a nested calc
Input
```
:root {
  --brand: #3366ff;
  --pad: 1rem;
}

.hero {
  padding: var(--pad) 0px;
  color: #ffffff;
  background: var(--brand);
}

@media (min-width: 768px) {
  .hero { padding: calc(var(--pad) * 2) 0; }
}
```
Output
```
:root{--brand:#36f;--pad:1rem}.hero{padding:var(--pad) 0px;color:#fff;background:var(--brand)}@media (min-width:768px){.hero{padding:calc(var(--pad) * 2) 0}}
```
Custom properties are declarations like any other as far as this is concerned, so --brand: #3366ff shortens to #36f. Same colour, three characters lighter. Two limits show up here as well. The 0px in padding: var(--pad) 0px keeps its unit, because the zero rule only fires directly after a colon. And the spacing inside calc() is left exactly as written, since arithmetic is one of the contexts where whitespace is meaningful.
Vendor-prefixed declarations
Input
```
.btn {
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
  background-image: -webkit-linear-gradient(top, #ffaa00, #ff8800);
}
```
Output
```
.btn{-webkit-transition:background-color 0.2s ease;transition:background-color 0.2s ease;background-image:-webkit-linear-gradient(top,#fa0,#f80)}
```
Prefixed properties pass through intact, since the leading hyphen is not a character this tool strips space around. Duplicate prefixed and unprefixed pairs are never deduplicated either, which is what you want, since older browsers need both. Only 14% off here, because the declarations are long and there was little whitespace to reclaim.
The details that have to survive
Input
```
.card :first-child {
  color: #aabbccdd;
  width: calc(100% + 1rem);
}
```
Output
```
.card :first-child{color:#abcd;width:calc(100% + 1rem)}
```
Three things here would break under a context-free find-and-replace, and none of them do. The space in .card :first-child is a descendant combinator and stays, because removing it would change which element matches. The eight-digit colour shortens to four characters rather than being truncated to five. And calc() keeps the spaces CSS requires around its + operator.

Frequently asked questions

How do I minify CSS online?
Paste your stylesheet into the left panel and the minified version is waiting on the right before you have finished pasting. Nothing to click, nothing to upload. The badge tells you what percentage smaller the result is, and Copy Output puts it on your clipboard ready to save as style.min.css.
How much smaller does minifying CSS make a file?
Hand-written CSS typically loses 15-30% of its characters, mostly indentation, line breaks, and comments. The number that reaches your users is smaller than that. Servers gzip or brotli CSS by default, and those algorithms already compress repeated whitespace well. Treat the percentage shown here as the uncompressed saving rather than the transfer saving.
Can minifying CSS break my stylesheet?
Not with ordinary CSS. Four cases catch naive minifiers: spacing inside calc(), a descendant combinator before a pseudo-class, eight-digit hex colours with alpha, and punctuation inside quoted strings. All four are handled here by tracking the context each character sits in. The one structure to know about is CSS nesting. A style rule nested directly inside another style rule has its selector read as though it were a declaration, so a leading descendant combinator there is not preserved. Plain, unnested stylesheets are unaffected.
What is the difference between this and cssnano or Lightning CSS?
cssnano, Lightning CSS, and esbuild parse your CSS into a syntax tree. That buys them work this tool cannot do: merging duplicate rules, folding longhand properties into shorthand, normalizing colour formats, and reordering safely, all without the string-and-comment edge cases a regex has. If you already run a build, use one of those. They will produce a smaller and safer file. This page is for the stylesheets that never touch a build pipeline: a static site, a theme settings box, a one-off page.
Can I minify SCSS or Less with this?
No, it expects plain CSS. Preprocessor syntax like variables, nesting, and mixins means nothing to it, so you will get compacted but still uncompiled text. Compile first, then minify: the Less to CSS tool on this site handles Less in the browser, and its output can be pasted straight in here.
Can you build a version of this that fits our own workflow?
Yes. Zinc Online Solutions builds internal tools and automations for exactly this shape of problem. If minifying and pasting stylesheets has become a recurring manual step across a set of client sites or a CMS with no build step, that step belongs in a script or a deploy hook rather than a browser tab. Describe how the job gets done today and we will work out what it should look like instead.

Get notified when new ZOS tools launchWe'll email you when we add new tools. No spam, unsubscribe anytime.