CSS Minifier_
Compress a stylesheet by stripping whitespace and comments — and see what that is worth after gzip, which is the only figure a visitor experiences. It is usually a small fraction of the number other minifiers print.
Values are never rewritten. No #ffffff shortened, no 0px stripped of its unit, no rules merged into shorthand. Those tricks are usually safe and occasionally change what your stylesheet means, and telling the two apart is not something a tool can do for you.
- Input
- Any stylesheet — a build artefact, a framework's output, or something hand-written. Nesting, layers, container queries and syntax invented after this was written all pass through, because it scans rather than parses.
- Output
- The same stylesheet with whitespace and comments removed, plus four byte counts: before and after, on disk and after gzip.
- Processing
- Minified and compressed in this tab. The gzip figure is real CompressionStream output, not an estimate.
- Limits
- Whitespace and comments only. Nothing that changes a value, merges a rule or reorders a cascade — those are trades, and this tool does not make them on your behalf.
- The number nobody shows
- gzip already removes most of what minification removes, because indentation is the most compressible thing in a file. A 30% saving on disk routinely arrives as 6% on the wire.
Why the headline saving is not the saving
Compression got there first
Minification deletes indentation, newlines and comments. A compressor's entire job is finding repeated sequences, and four spaces at the start of ten thousand lines is the most repetitive thing in any source file — so gzip had already reduced that to almost nothing before minification was asked to. What is left for minification to remove is the part gzip could not model, which is a much smaller share. This page runs both and shows you the pair, because a percentage that describes your hard drive is not a percentage that describes your users.
That is not an argument for skipping it
A few percent on a render-blocking stylesheet is still worth having, it costs nothing once a build step exists, and there are places where no compression applies at all — an inlined <style> block in a cached HTML document, a stylesheet read from disk by an embedded browser, a file served by something that never learned to negotiate encodings. The argument is only against quoting the disk figure as though it were the transfer figure, which is what every tool that shows one number is doing.
The rewrites this refuses to make
Aggressive minifiers shorten #ffffff to #fff, drop the unit from 0px, fold four longhand declarations into one shorthand and combine rules with matching bodies. Each is usually correct. Shorthand also resets every property in its family that you did not mention, combining rules moves them in the cascade, and a unitless zero is invalid inside calc() and wrong for flex-basis. The saving from all of it together is smaller than the gap between the two numbers above, so it is not a trade this page makes.
Where a space is not whitespace
.a .b and .a.b select different elements — the space is the descendant combinator, and deleting it silently changes which rules apply. Inside calc(), min(), max() and clamp() the spaces around + and - are required by the grammar, so removing them turns a subtraction into a syntax error and the whole declaration is dropped. Both cases are in the test suite, because a minifier that gets them wrong looks fine until the one page that used the pattern does not.
Paste, read both numbers, then decide
- 01Paste or upload the stylesheet. Minification runs as you type; the gzip measurement follows a moment later because it is a real compression pass.
- 02Compare the two right-hand figures against the two on the left. The gap between them is what compression was already doing for you.
- 03Read the line underneath. It states the disk saving and the wire saving in the same sentence so neither can be quoted alone.
- 04Copy or download the result. If the wire saving is near zero, the honest conclusion is that this file was not the problem.
When the distinction changes the answer
A build-step decision
Deciding whether adding a minifier to the pipeline is worth it.
the gzipped pair
the disk percentage
An inlined critical block
CSS pasted into a style tag in the document head.
applies to the whole document
the wire figure is the one to use
A stylesheet served without gzip
An embedded browser, a kiosk, a file read from disk.
the disk figure IS the saving
it is the larger one
Reading somebody else's build output
You have the minified file and want it legible.
the CSS beautifier
runs this in reverse
What is removed, and what is deliberately left
| Construct | Treatment | Why |
|---|---|---|
| Indentation and newlines | Removed | The bulk of the disk saving, and the part gzip had mostly collected already |
/* comments */ | Removed | Nothing downstream reads them |
/*! licence */ | Kept | The bang convention marks text that must survive minification for legal reasons |
Space in .a .b | Kept | It is the descendant combinator, not formatting — removing it changes what is selected |
Space in calc(100% - 20px) | Kept | Required by the grammar; without it the expression is invalid and the declaration is dropped |
#ffffff | Unchanged | Shortening is safe here and not everywhere, and this draws the line at values it will not touch |
0px | Unchanged | A unitless zero is invalid inside calc() and wrong for flex-basis |
| Duplicate rules | Unchanged | Combining them moves declarations in the cascade, which can change the result |
Every row above has a test. The three that matter — the combinator, the calc grammar and the licence comment — are the ones minifiers get wrong, and they are wrong invisibly.
Getting the number you actually need
- Check whether your server compresses before deciding anything.
curl -sI -H "Accept-Encoding: gzip" your-urlshows thecontent-encodingheader, and if it says gzip then the right-hand pair is your reality. - Brotli is smaller again, and this page cannot measure it — CompressionStream does not expose it. Treat the gzip figure as an upper bound on what you would save under brotli.
- A large disk saving with a tiny wire saving means the file was mostly formatting. That is normal and is not a finding about your CSS.
- If the file is still large after minifying, the size is in the rules. Unused selectors from a framework are almost always the answer, and no minifier removes those because none of them can see your markup.
- Keep the readable version in source control and minify in the build. Minified CSS is not a source format, and beautifying it back does not restore the comments.
- Serve with a versioned filename if you set a long cache time — that is the change that actually removes the request, and it is worth more than every byte on this page.
Where minifying CSS goes wrong
The disk figure gets quoted as the transfer figure
A tool reports 32% smaller, that number goes into a ticket, and the deployed saving is four percent. Nobody lied; the measurement was just of the wrong thing. This is the reason both pairs are shown here rather than one.
Aggressive minification changes the cascade
Merging two rules with identical bodies moves declarations relative to everything between them. If a third rule sat in the middle and matched the same element, the result changes. The saving is a few bytes and the failure is a visual bug nobody can reproduce.
Shorthand resets what you did not write
Folding four margin declarations into one is fine. Folding background-color into background resets the image, position, repeat and size at the same time. A minifier that does this without knowing your cascade is guessing.
Licence comments are legally required to survive
Bundled libraries frequently carry an attribution notice that their licence obliges you to keep. The /*! convention exists for that, and a minifier that strips it puts you in breach. Comments marked that way are preserved here and counted so you can see it happened.
Minified CSS is not a source format
Beautifying it back gives you the structure and never the comments, because those were deleted. Keep the readable file and treat the minified one as a build artefact, or the first bug in it will be read one character at a time.
What is measured, and how
- File handling
- Uploads are read inside the page with the browser File API and are never transmitted; Download writes out what is already in the tab.
- Method
- A single-pass scanner, not a parser. Forward-compatible syntax — at-rules and functions that did not exist when this was written — is copied through rather than rejected
- Removed
- Indentation, newlines, redundant spaces around punctuation, and comments
- Preserved
- Every value exactly as written, the descendant combinator, the required spaces inside
calc(),min(),max()andclamp(), and/*!licence comments - Compressed measurement
- Real gzip through the platform CompressionStream API, not an estimate. Where a browser lacks it the figure is reported as unavailable rather than guessed
- Brotli
- Not measurable here — CompressionStream exposes gzip and deflate only. Brotli is typically smaller again, so the gzip figure is an upper bound on what brotli would save
- Counting
- UTF-8 bytes, not characters. A stylesheet with non-ASCII content in it costs more than its length suggests, and bytes are what a server sends
- Scope
- Compression only. The formatting direction, and the same engine read the other way, live on the CSS beautifier
- Network
- None from tool code. A test sweep calls every function this page uses with
fetchandXMLHttpRequestreplaced by stubs that throw, so a stray request fails the build instead of shipping. Disconnect from the network and the page still works.
Questions about minifying CSS
How much does minifying CSS actually save?
On disk, commonly 20 to 40 percent for hand-written CSS and much less for build output that was never indented. After gzip — which is what your visitors receive — commonly a few percent, because compression had already removed the indentation that made up most of the first figure. This page shows both so the difference is visible rather than argued about.
Should I still minify if my server uses gzip?
Usually yes, because it costs nothing once a build step exists and a few percent on a render-blocking file is worth having. But do it knowing the size of the win. If the measured wire saving here is close to zero, the honest conclusion is that this file is not where your page weight is.
Why are my colour values left long?
Because the line has to be drawn somewhere, and value rewriting is where safety stops being provable. That particular case is safe; dropping the unit from a zero is not, inside calc(); merging shorthand is not, when the cascade matters. Rather than ship a list of exceptions, this removes formatting and leaves everything that carries meaning.
Can minified CSS be un-minified?
The structure comes back and the comments do not, because they were deleted rather than compressed. The CSS beautifier will re-indent and re-space it into something readable, which is enough for reading a bundle you did not build but is not a substitute for keeping the source.
Does minifying break CSS?
Careless minifying does, in two specific places, and both are silent. .a .b written as .a.b is a different selector — one wants a .b inside a .a, the other wants an element carrying both classes. And calc(100% - 20px) written without its spaces stops being a subtraction, so the value is invalid and the browser discards that declaration alone while everything around it keeps working. Neither raises an error anywhere.
What about brotli?
Smaller again, typically another ten to twenty percent over gzip on text. It cannot be measured here because CompressionStream does not offer it, so treat the gzip figure as the upper bound: whatever minification saves you after gzip, it saves less than that after brotli.
Is my stylesheet uploaded anywhere?
The work is JavaScript running in this tab. Every function it calls is covered by a test that stubs fetch and XMLHttpRequest to throw, so a request that slipped in would break the build rather than reach a server — and you can confirm it for yourself by disconnecting and carrying on.