What this CSS minifier does
This CSS minifier strips a stylesheet down to what the browser actually reads. Paste your CSS and the minified version appears as you type, with the size in bytes before and after so you can see exactly what you saved. Nothing is sent anywhere: the whole job runs in your browser.
It is built on its own tokeniser rather than on regular expressions. That matters, because the
text of a stylesheet is full of places where a naive search and replace does damage: a /* inside a
string, a semicolon inside a data: URL, a colon escaped inside a Tailwind class name such as
.sm\:flex. Each of those is read as the token it really is, and left alone.
How to use it
- Paste your stylesheet into the input box.
- Read the minified output and the byte counts underneath it.
- If the input is broken — an unclosed string, comment or block — the error names the line.
- Copy the result, or download it as
styles.min.css.
What gets removed, and what never does
Removed: ordinary comments, whitespace that has no meaning, the space around >, ~ and + in a
selector, the space after a colon in a declaration, the last semicolon in each block, and style
rules left with nothing inside. When you only want to remove CSS comments, this does it along the
way, while comments that open with /*! stay, since that is where licence notices live.
Kept exactly: strings, url() values, attribute selectors, custom properties (whose value is only
collapsed, never reshaped), and every value. The spaces around + and - inside calc() are
required by the specification, so they survive. So does the space in a :hover, which selects any
hovered descendant of a link and means something quite different from a:hover. An empty at-rule
such as @layer base {} also stays, because it fixes the order of cascade layers even with no rules
in it.
Why minify CSS online at all
For a production site, the build tool should do it. Vite, webpack and PostCSS pipelines all run a minifier, and that is the right place for it. People reach for a page like this in the other cases: a snippet going into a CMS field or an email template, a third-party widget that has to be pasted inline, a quick check of how much a stylesheet would really shrink, or an inherited site with no build step at all.
It is worth being honest about the gain. On a typical hand-written stylesheet, minification saves between a fifth and a third of the bytes. Once the server compresses the file with gzip or Brotli, the difference narrows further, because compression is very good at repeated whitespace. Minifying still helps, since the browser parses fewer bytes and the cache holds less, but it is not a substitute for removing CSS nobody uses.
Nesting and modern syntax
Native CSS nesting, @layer, @container and @supports are all handled the same way as any
block: the tokeniser does not need a list of known at-rules, so syntax newer than this page still
minifies correctly. A nested &:hover rule inside a declaration block keeps its place, and the
declarations around it keep their separating semicolons.
Going the other way is just as common. When you need to read a minified file rather than ship one, the CSS beautifier uses the same tokeniser to indent it back out, one declaration per line.