How CSS Minifier works
This CSS minifier makes four changes: it deletes every /* */ comment, collapses each run of spaces, tabs and line breaks to a single space, removes the space on either side of { } : ; , > ~ and +, and drops the semicolon before each closing brace. Nothing else is rewritten, so colours, units, property order and rule order come out exactly as you wrote them. It is a text-pattern pass, not a full CSS parser, and that has three consequences worth knowing before you ship the output: an addition inside calc() or clamp(), a selector with a space before a pseudo-class, and spacing inside quoted strings are all affected. Each is shown below.
What this minifier changes, with before and after
Every After value is the tool's real output for the Before text.
| Change | Before | After |
|---|---|---|
| Spaces and last semicolon in a rule | a { color: red; } | a{color:red} |
| Comments, including /*! licence banners | /*! licence */ /* note */ body{margin:0} | body{margin:0} |
| Spaces around child and sibling combinators | .a > .b + .c ~ .d { margin: 0 auto; } | .a>.b+.c~.d{margin:0 auto} |
| Spaces around commas in a selector list | .nav li a , .nav li span { display: block; } | .nav li a,.nav li span{display:block} |
| Spaces inside a media query condition | @media (min-width: 600px) and (max-width: 900px) { ... } | @media (min-width:600px) and (max-width:900px){...} |
| Space before !important is kept | a { color: red !important ; } | a{color:red !important} |
| Already minified input | a{color:red} | a{color:red} (Saved: 0%) |
The descendant combinator, the single space in .nav li a, is always kept, because removing it would change which elements match.
Cases to check before using the output
The tool matches characters, not CSS grammar, so it cannot tell when a space or a colon is meaningful. These three patterns come out different from what you wrote.
| Pattern | Input | Output | Why it matters |
|---|---|---|---|
| Addition inside calc(), clamp(), min() or max() | height: calc(50% + 10px) | height:calc(50%+10px) | CSS requires a space on both sides of + in calc(), so the browser discards this declaration. The same happens in clamp(1rem, 2vw + 1rem, 3rem), which becomes clamp(1rem,2vw+1rem,3rem). Subtraction is untouched: calc(100% - 20px) stays as written. |
| Space before a pseudo-class | .list :not(.x) { color: red; } | .list:not(.x){color:red} | The first targets descendants of .list; the second targets .list itself. The same happens to .card :hover. |
| Spaces and colons inside a string | content: "a : b" | content:"a:b" | Text inside quotes is treated like any other text, so spacing around : ; , > ~ + { } is removed and double spaces become one. |
A fix for the first two: write the addition as a subtraction of a negative, calc(50% - -10px), which is valid CSS and comes out with its spaces intact, and write the selector as .list *:not(.x), which means the same thing and survives minifying.
What it leaves alone that other minifiers shorten
| Optimisation | Example input | This tool's output |
|---|---|---|
| Shortening hex colours | color: #ffffff | color:#ffffff |
| Dropping units on zero and merging repeated values | margin: 0px 0px 0px 0px | margin:0px 0px 0px 0px |
| Trimming trailing zeros in numbers | padding: 0.50em 10px | padding:0.50em 10px |
| Merging rules with the same selector | .a { color: red; } .a { color: blue; } | .a{color:red}.a{color:blue} |
| Removing empty rules | .b { } | .b{} |
| Removing a doubled semicolon | .x{color:red;;} | .x{color:red;} |
| Removing unused selectors | Any rule your HTML never uses | Kept |
Build tools such as cssnano, Lightning CSS and esbuild parse the stylesheet and apply these optimisations safely. Use one of them when a build step is available.
Two complete runs with the Savings figures
The sample rule
/* card */ .card { padding: 16px; border-radius: 12px; color: #101828; } written over six lines
.card{padding:16px;border-radius:12px;color:#101828} Before: 78 chars, After: 52 chars, Saved: 33%
Custom properties, an import and a grouped selector
@import url("a.css"); then :root with --gap: 8px and --font: "Inter", sans-serif; then h1, h2, h3 on separate lines with margin: 0 0 var(--gap) and font-family: var(--font)
@import url("a.css");:root{--gap:8px;--font:"Inter",sans-serif}h1,h2,h3{margin:0 0 var(--gap);font-family:var(--font)} Before: 145 chars, After: 118 chars, Saved: 19%
The semicolon after @import is kept; only a semicolon directly before a closing brace is dropped.
When pasting CSS into a minifier is the right tool
- A static page, a landing page or a theme with no bundler, where one stylesheet is edited by hand and uploaded.
- A block of critical CSS that will sit inside a style element in the page head.
- A custom CSS field in a CMS, email builder or ad platform that limits the number of characters.
- A quick check of how much of a stylesheet is comments and formatting, using the Saved percentage.
Using CSS Minifier
- 1
Paste your stylesheet into the CSS box, replacing the sample .card rule.
- 2
Read the result under Minified CSS. It updates as you type and there are no options to set.
- 3
Check Savings for the Before and After character counts and the Saved percentage.
- 4
Search your source for calc(, clamp(, min( and max( containing a plus sign and for selectors such as .list :not(.x), and compare those lines in the output (see the table of cases to check).
- 5
Copy the output or download it as style.min.css, and keep your readable file as the one you edit.