How to use the CSS minifier
- Paste your stylesheet into CSS input, or press Open .css file to load one from your computer. The result updates as you type.
- Keep Remove comments on to strip comments. Keep Keep /*! license */ comments on if your CSS has a license banner that must stay.
- Keep Shorten values on to rewrite
#ffffffas#fff,0pxas0and0.5as.5. Turn it off for a strict comments-and-whitespace pass. - Press Copy output or Download .min.css, and read the Original, Result and Saved figures above the boxes.
What gets removed and what never does
The tool reads your CSS the way a browser tokenizes it, following the CSS Syntax Module Level 3. Strings, url() addresses, escapes such as .sm\:flex and comments are set aside first, so no later step can change them. Then it removes comments, collapses whitespace, drops the last semicolon in each block and deletes empty rules.
Spaces that carry meaning stay. The space in .nav :first-child means a descendant, which is not the same as .nav:first-child (Selectors Level 4), and calc() needs spaces around + and - (MDN). With Shorten values on, a unit is dropped from zero lengths only where it is optional, never in flex-basis, calc(), var(), custom properties, times or angles. The tool never merges rules, reorders them or renames anything.
Worked example
The sample that loads with the page is 376 bytes. After minifying it is 278 bytes, a saving of 98 bytes (26.1% smaller). The header rule becomes .site-header{background-color:#fff;margin:0 auto;padding:.5rem 1rem;width:calc(100% - 2rem)}. The comment is gone, #ffffff became #fff, 0px became 0, 0.5rem became .5rem, and calc(100% - 2rem) kept its spaces. The " > " inside the content rule is untouched.
Limits and edge cases
- It does not merge selectors or remove unused CSS, so savings are smaller than a bundler gives you, but you get the same rules in the same order.
- Broken input is handled gently: a missing
}is added, an extra}is dropped, and a warning appears under the figures. - Source map comments (
/*# sourceMappingURL=... */) are removed with other comments, so the map link is lost. - Old Internet Explorer hacks such as
*zoompass through, andfilter: progid:...values are never shortened. - Everything runs in your browser and your CSS is not uploaded. Need the rest of the page? Try the HTML Minifier and the JavaScript Minifier.
Frequently asked questions
Will minifying change how my page looks?
It should not. The tool removes comments and whitespace only where CSS ignores them, and it keeps spaces that carry meaning, such as the descendant space in .nav :first-child and the spaces inside calc(). In our check, Chrome parsed identical rules before and after minifying Bootstrap 5.3, Font Awesome 6 and Tailwind CSS. Keep your original file anyway.
Does it keep CSS custom properties and modern syntax?
Yes. Custom properties such as --space: 0.50rem are kept as written, with only the outer whitespace trimmed, because scripts can read their exact text. Nested rules, @layer, @container, @supports and range media queries like (400px <= width <= 700px) are handled as ordinary blocks. Empty @layer and @keyframes blocks are kept because they still have an effect.
How much smaller will my CSS get?
It depends on how much indentation and commenting the file has. In our tests Bootstrap 5.3 shrank 17 percent, Font Awesome 6 shrank 18 percent and the comment-heavy normalize.css shrank 70 percent. The page also shows an estimated gzip size, which matters more in practice because servers send CSS compressed and the gap narrows after compression.
Can I get my original CSS back from minified CSS?
Not fully. Comments and the original layout are gone for good, so keep your source file. The Beautify button re-indents minified rules with two spaces so you can read them, but shortened colors and numbers stay shortened. For more control over indentation, use the CSS Beautifier.
Sources: W3C, CSS Syntax Module Level 3; W3C, Selectors Level 4; MDN Web Docs, calc().