CSS Minifier
Every byte of CSS a visitor downloads is a byte the page waits on before it can paint, and most stylesheets carry slack a build step should clear away, from indentation and comments to colours written the long way and rules that could be merged. This minifier removes all of it in one paste. You drop in a stylesheet and get back the smallest equivalent CSS, with the original, minified, and gzip sizes shown side by side so the saving is never a guess. It reads the CSS into a real syntax tree instead of chopping at whitespace, so the output behaves exactly like the source, and anything the parser cannot read is listed with its position rather than dropped in silence. It all runs locally in your browser.
Overview
A minifier is only worth using if you can trust the output and see the gain. This one is built around both: accurate compression you can ship, and the numbers that show it was worth doing.
- 01
Parser-based minification
The stylesheet is read into a real syntax tree before anything is removed, so comments, whitespace, and redundant tokens go while the meaning stays the same. There is no fragile text replacement to break on an unusual selector or a data URI.
- 02
Smarter values and colours
Long-hand values are collapsed where it is safe to do so. A six-digit hex colour becomes three, a zero length drops its unit, and trailing semicolons and leading zeros disappear. Small wins that add up across a large file.
- 03
Optional rule restructuring
Turn restructuring on to merge duplicate selectors, combine adjacent rules, and reorder declarations for a smaller file. Turn it off when you want the output to mirror the source order line for line.
- 04
Nothing disappears quietly
A parser that recovers from a syntax error by dropping what it could not read gives you a smaller file and no warning. Every skip is listed here with its line and column, and a stylesheet written with nesting is reported rather than stripped of its nested rules.
- 05
A size breakdown you can trust
The input and the result each carry a byte count and a gzip figure, next to the exact percentage saved, so you can compare like with like. Gzip is the pair that matches what travels over the wire.
- 06
Copy, download, or upload
Paste from the clipboard, load a file from disk, then copy the result or save it as a min.css file. The whole loop takes seconds and never touches a server.
How to use
Go from a readable stylesheet to a production-ready, minimal one in a few steps, with the saving in front of you the whole time.
- 01
Paste your CSS into the input panel, or use Upload to load a file straight from disk.
- 02
Choose your options. Leave Restructure on for the smallest output, or turn it off when you need the rule order preserved, and keep license comments if you ship a banner.
- 03
Compare the sizes in the two panel headers, where each side shows its byte count and gzip figure alongside the percentage saved.
- 04
Copy the minified CSS or download it as a min.css file, then wire it into the page or build step that serves your production styles.
Details
The details that make the output safe to ship and quick to trust.
- Built on csso, a mature CSS optimizer that works on a full syntax tree rather than by text substitution.
- The gzip size is measured with the compression built into your browser, so the figure reflects what a real server would send.
- Minification runs a moment after you stop typing, with no button to press and no wait for a server round trip.
- Anything the parser could not read is listed with its line, its column, and the reason, instead of vanishing from the output.
- Nothing is uploaded or logged. The CSS you paste, including unreleased work, stays in your browser and is gone when you close the tab.
Use cases
Where shaving CSS down to its essentials pays off.
-
Shipping a faster page
A smaller stylesheet reaches the browser sooner and unblocks rendering, which helps First Contentful Paint and the Core Web Vitals that search engines weigh.
-
A build step without a bundler
On a static site, a landing page, or an email template where you are not running a bundler, paste the CSS here for the same compression a pipeline would give you.
-
Inlining critical CSS
When you inline the styles for the top of the page to avoid a render-blocking request, every byte counts, and minified is the only sensible form to embed.
-
Trimming a generated stylesheet
Vendor CSS and tool-generated output often ship unminified. Run them through here to recover the bytes before they reach your users.
See also
Doing the same for your scripts? Pair this with the JavaScript Minifier, and when you would rather expand and tidy code than shrink it, the SQL Formatter formats the other direction. And to go the other way with the same stylesheet — turning one long line back into something a person can read — that is the CSS Beautifier.
What minifying CSS really does
Minifying is not obfuscation, and it is not the same as gzip compression. It removes characters a browser does not need while keeping the rendered result identical. Here is what goes, and why it is safe.
-
Whitespace and formatting
The indentation, line breaks, and spaces that make CSS readable mean nothing to a browser. A minifier removes them, along with the final semicolon before each closing brace, because the parser does not require any of it.
-
Comments
Source comments are written for people and never reach the rendered page, so they are removed in full. The one exception is a license banner, which tooling keeps by convention when you ask it to.
-
Shorter equivalent values
Many values have a smaller spelling that means the same thing. A white hex shrinks from six digits to three, a zero pixel length becomes a plain zero, and a leading zero on a decimal drops away. A careful minifier applies these only when the result is identical.
-
Merging and restructuring
When two selectors share declarations, or the same selector appears twice, their rules can be combined, and nearby declarations can be reordered. This saves more bytes but changes how the source is laid out, which is why it stays optional.
-
Why gzip is the number that counts
Servers send CSS compressed with gzip or brotli, and those already collapse repeated whitespace. Minifying still helps, because it removes what compression cannot and hands the compressor cleaner input, but you should always judge the gain by the gzip size rather than the raw bytes.
-
Minify for production, keep the source readable
Minified CSS is painful to edit, so it belongs in your build output, not your repository. Write and commit the expanded version, and minify as the last step before it ships.
Best practices
Habits that keep minified CSS both small and free of surprises.
- Minify as the last step of your build and deploy the result. Never hand-edit minified CSS or commit it as your source of truth.
- Judge the gain by the gzip size, since that is what the server actually transfers. A large raw saving can shrink to little once compression is applied.
- Read the skipped list before you ship. Anything named there was dropped by the parser, which means a browser would have ignored it too, and it is usually a typo worth fixing at the source.
- Keep restructuring on for production, but turn it off when you are diffing the output or need selectors and order to match the source.
- Serve the minified file with gzip or brotli enabled and a long cache lifetime. Minification and transport compression stack, they do not replace each other.
- Keep license banners with the matching option when you bundle third-party CSS, so you stay within the terms you are required to ship.
Limitations
What this tool does, and what it leaves to other steps.
- It minifies a single stylesheet of valid CSS. It does not bundle imported files, resolve URLs, or follow references to other files.
- Nesting is not supported. The engine was written before the syntax existed and would delete the nested blocks, so a nested stylesheet is reported with the position of the first nested rule instead of being minified.
- It will not add vendor prefixes, transpile modern syntax, or down-level features for old browsers. Pair it with a tool like Autoprefixer or Lightning CSS for that.
- Styles written in a preprocessor such as Sass or Less, or with framework directives such as @apply, have to be compiled to plain CSS first. The tool points at the first one it finds instead of minifying around it.
- A construct the parser cannot read is skipped rather than guessed at, exactly as a browser would ignore it, and every skip is listed with its position so you can see what did not survive.
- Files are read in the browser, so uploads are capped at 2 MB. A stylesheet larger than that belongs in a build step.
FAQ
Common questions about minifying CSS, what it changes, and when to use it.
Does minifying change how my CSS renders?
No. Minification only removes characters the browser does not need, such as whitespace, comments, and redundant semicolons, and rewrites values to shorter forms that mean exactly the same thing. The rendered result is identical. The optional restructuring also keeps behaviour the same, and only changes how the rules are organised internally.
What is the difference between minifying and gzipping?
They work together. Minifying edits the CSS text itself, removing content a compressor cannot know is unnecessary. Gzip or brotli then compresses whatever you send, collapsing repetition on the wire. You want both: minify first for the cleanest input, then let the server compress it for transport. Both panels show a gzip figure so you can compare the two directly.
How much smaller will my CSS get?
It depends entirely on how the source was written. Heavily commented, generously formatted, or repetitive stylesheets can drop by a third to a half in raw size, while already-tight CSS may only shave a little. Once gzip is in play the percentage shrinks, because compression had already recovered much of the whitespace, which is why the gzip pair is the honest comparison.
Can it minify CSS that uses nesting?
Not at the moment. The engine behind this tool was written before nesting was added to CSS, and it would drop every nested block without a word, leaving you with a stylesheet quietly missing rules. Rather than hand that back, the tool detects nesting and points at the first nested rule. Flatten it, or let a build tool that understands nesting minify that file.
What happens if my CSS has a syntax error?
The parser skips the part it cannot read and carries on, which is what a browser does with a broken declaration too. The difference is that every skip is listed here with its line, its column, and the reason, so a missing colon shows up as a note rather than as a rule that silently went missing. If nothing survives, the tool says so instead of showing an empty panel. Input that is not plain CSS at all, such as Sass or a file that uses @apply, is reported as needing a build step rather than minified around.
Should I commit the minified CSS to my repository?
No. Minified CSS is a build artifact, not source. Commit the readable, expanded version that you and your teammates actually edit, and generate the minified file as the final step before it is served. Checking in minified output makes reviews hard to read and merges painful.
Will it break my variables, animations, or media queries?
No. Custom properties, keyframes, media and supports queries, layers, container queries, and calc expressions are all read and preserved. Minification understands the syntax, so valid constructs survive intact. Nesting is the one part of modern CSS the engine cannot read, and the tool stops rather than losing it.
Is my CSS uploaded anywhere?
No. Everything runs in your browser. The CSS you paste, any file you upload, and the result are processed locally, never transmitted or stored, and disappear the moment you close the tab, so even private or unreleased styles are safe.
Related tools
Keep going with the rest of the data and format toolkit.