What is a CSS minifier?
A CSS minifier shrinks a stylesheet by removing everything the browser ignores when it parses CSS: comments, indentation, line breaks and most spaces. The rules and values stay the same, so the page looks identical but the file is smaller. This tool does whitespace-level minification with regular expressions, without rewriting any values or selectors.
How to minify CSS
- Paste your stylesheet into the input box.
- Click Minify.
- Copy the single-line output into your
.min.cssfile, or straight into a<style>block.
What gets removed
| Before | After | Rule |
|---|---|---|
/* Buttons */ |
(removed) | All /* */ comments go |
.a ,\n.b { |
.a,.b{ |
No whitespace around { } : ; , |
color: red;\n} |
color:red} |
Last semicolon before } dropped |
margin: 0 auto |
margin:0 auto |
Other whitespace runs become one space |
.a > .b + .c |
.a > .b + .c |
Spaces around >, + and ~ are kept |
#ffffff, 0px |
unchanged | Values aren't shortened |
Removing the space around these characters is safe in normal declarations because the CSS Syntax specification treats them as separate tokens regardless of the whitespace around them.
Worked example
Input (144 characters):
/* Buttons */
.button,
.button-primary {
color: #ffffff;
padding: 8px 16px;
margin: 0 auto;
}
.button:hover {
color: #eeeeee;
}
Output (97 characters, about 33% smaller):
.button,.button-primary{color:#ffffff;padding:8px 16px;margin:0 auto}.button:hover{color:#eeeeee}
The space in 8px 16px and 0 auto survives because it separates two values. A more aggressive minifier would also write #fff and #eee; this one leaves values as you wrote them.
Three things to double-check
These come from the way the tool matches characters without knowing where it is in the stylesheet. Each example below is real output.
A space before : in a selector. In CSS, a space is the descendant combinator. nav :first-child { color: red; } targets the first child of anything inside nav, but it minifies to nav:first-child{color:red}, which targets a nav element that is itself a first child. If you rely on this pattern, write it as nav *:first-child before minifying; the * keeps the meaning and survives.
Quoted strings. content: "a, b: c; d" becomes content:"a,b:c;d". Text inside content, font names with commas in quotes, and data URIs with spaces can change. Paths without spaces, such as url("data:image/svg+xml;utf8,<svg/>"), come through intact.
License comments. /*! MIT License */ is removed like any other comment. Keep a copy of required notices.
Everything else, including @media queries, !important, attribute selectors and calc(100% - 10px), minifies without change in meaning.
When to minify by hand
For a production site, minification usually belongs in the build: Vite, webpack and most frameworks minify CSS automatically. This tool is handy for the cases in between, such as a stylesheet for an email template, a snippet for a CMS that has no build step, or checking how much smaller a file would be before you set up tooling. Serving CSS with gzip or Brotli compression (MDN: HTTP compression) saves more than minifying alone, and the two work well together.
Related tools
- HTML minifier: the same treatment for markup.
- Code beautifier: turn minified CSS back into readable, indented rules.
- CSS editor: edit stylesheets with syntax highlighting.
- Learn CSS: selectors, combinators and the rest of the language.
Last updated