CSS Minifier
Paste your CSS and minify it — comments stripped, whitespace collapsed, hex colors shortened, zero-value units dropped safely — or beautify it back into readable, indented CSS. See the size saved instantly.
Paste some CSS above to get started.
- Original
- —
- Result
- —
- Difference
- —
A /*! ... */ license comment was kept even though comment stripping is on — that's intentional.
Every calculation runs in your browser — your CSS is never uploaded or stored anywhere.
What this CSS minifier actually changes
Minifying CSS means removing every byte that a browser doesn't need to render your page correctly, without changing what it renders. This tool applies four specific, individually toggleable transforms: it strips comments (except license banners starting with /*!), collapses runs of whitespace and newlines to a single space, shortens 6- and 8-digit hex colors to 3 or 4 digits when it's mathematically safe, and drops the unit from zero-value lengths and percentages. It also removes the last, redundant semicolon before a closing brace. Nothing else is rewritten — selectors, custom property names, vendor prefixes and value order are left exactly as you wrote them.
Why a naive find-and-replace minifier is risky
The three riskiest places to get CSS minification wrong are quoted strings, url(), and hex-digit-only ID selectors. A regex that blindly strips whitespace can mangle content: 'Save 20%' by collapsing the two spaces the author actually wanted. A regex that blindly shortens every #-prefixed token can turn a legitimate ID selector like #fff123 into #f13, silently breaking every rule and every document.querySelector call that targets it. This tool avoids both failure modes with a tokenizer that separates code from strings, comments and unquoted url() values before any transform runs, and it only shortens hex values that sit right after a colon or an opening parenthesis — a position only a real color value would be in.
Worked examples
/* card */
.card {
background: #ffffff;
margin: 0px 12px;
}
becomes .card{background:#fff;margin:0 12px} — the comment is gone, the color is shortened, and 0px lost its unit because margin is a length.#fff123 { color: #aabbcc; }
becomes #fff123{color:#abc} — the selector #fff123 is untouched because it isn't preceded by a colon or a parenthesis, while the actual color value #aabbcc is safely shortened.calc() keeps its zero-length unit.
width: calc(100% - 0px);
stays exactly width:calc(100% - 0px) — stripping the unit to plain 0 inside calc(), min(), max() or clamp() risks a type mismatch under the CSS Values spec, so this tool never touches zero units inside those functions.What gets left as-is, on purpose
| Case | Example | Why it's untouched |
|---|---|---|
| Quoted strings | content: 'a b' | Internal spacing may be intentional, visible text |
Unquoted url() | url(a-0px.png) | A file path or data URI, not CSS syntax to compress |
| Time / angle / frequency zero | 0s, 0deg | Spec requires a unit even at zero for these types |
| Selector combinators | .a > .b, .a .b | Removing the space can merge or change the selector's meaning |
| License comments | /*! MIT */ | Kept by convention even with "Strip comments" on |
Beautify: going the other way
Switch to the Beautify tab to re-indent CSS that arrived minified, auto-generated, or just messily formatted. It uses the same tokenizer, so it re-indents structure — one declaration per line, two-space indentation per nesting level, a blank line between top-level rules — without touching the content of any string or url() along the way. It's a fast way to read a third-party stylesheet or a build tool's compressed output before you edit it.
Sources & further reading
Frequently asked questions
Will minifying break url() paths or content: '' strings in my CSS?
No — this minifier tokenizes your CSS first, so it always knows when text is inside a quoted string, an unquoted url(), or a comment, and never rewrites that text. For example, background:url(images/a-0px-file.png) keeps its literal '0px' and its slashes untouched even though 0px is normally shortened elsewhere, and content: 'Save 0%' keeps its exact spacing and percent sign. Whitespace collapsing, comment stripping, hex shortening and zero-unit removal are only applied to the surrounding CSS syntax — selectors, property names, and the parts of a value outside quotes and url() — never to string or URL contents themselves.
Is it safe to shorten 6-digit hex colors, and what about #fff123 as an element ID?
A 6-digit hex color can only be shortened to 3 digits when each pair of digits repeats exactly — #ffffff becomes #fff because every pair (ff, ff, ff) repeats, while a color like #a1b2c3 cannot shorten because none of its pairs (a1, b2, c3) repeat, so it's left exactly as written rather than guessed or rounded. This tool also only shortens a hex-looking value when it's clearly in a color position — right after a colon or an opening parenthesis, such as color:#ffffff or rgba(#fff...). A value like #fff123 used as an ID selector (#fff123 { ... }) is never touched, because CSS lets IDs be hex-digit strings too, and a naive minifier that shortens every #-prefixed token can silently break your selectors.
Why does 10px become 10px but 0px become 0, and why do some zero values keep their unit?
Per the CSS Values and Units spec, a zero length or percentage never needs a unit — 0px, 0em, and 0% all mean exactly the same thing as a unitless 0, so margin:0px 10px safely becomes margin:0 10px. Time, angle, frequency, resolution and flex ('fr') values are different: the spec requires a unit even at zero, so transition:opacity 0s stays 0s and rotate:0deg stays 0deg — dropping those units can make a browser reject the whole declaration. This tool keeps that distinction and also skips zero-unit removal entirely inside calc(), min(), max() and clamp(), because calc(100% - 0px) and calc(100% - 0) are not guaranteed to behave the same way under the specification's type-checking rules.
What happens to a /*! license */ comment when I strip comments, and can I un-minify CSS I already have?
Comments that start with /*! are treated as license or attribution banners — the same convention used by tools like Terser and clean-css — so they're kept even when 'Strip comments' is checked; every other comment is removed. To go the other direction, switch to Beautify mode and paste in minified or hand-compressed CSS: the tool re-indents it with one selector or declaration per line and matching brace indentation, so you can read or edit a stylesheet that arrived as a single unreadable line.
Is my CSS uploaded anywhere, and is there a size limit?
No. Every step — tokenizing, minifying, beautifying and measuring the size saved — runs locally in your browser using plain JavaScript; nothing you paste is ever sent to a server or saved outside your own device's local storage (which only remembers your last input and option choices, for convenience). Extremely large pastes, above roughly 3 MB, are rejected with a clear message instead of freezing the tab, since a file that size is almost always pasted by accident.