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 it all runs locally in your browser.
- Reads the stylesheet into a real syntax tree, so the minified output behaves exactly like the source instead of breaking on an unusual selector
- Shows the original, minified, and gzip sizes together, so you judge the result by what a server actually sends rather than the raw byte count
- Can merge duplicate selectors and reorder declarations for a smaller file, or keep the structure untouched when you need a clean diff
- Runs entirely in your browser, so the CSS you paste, including unreleased work, stays on your device and is gone when you close the tab
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 payload. Turn it off when you want the output to mirror the source order line for line.
- 04
License comments kept
The banners that licenses and attribution require can stay while every other comment is removed, so you stay compliant without shipping notes nobody reads.
- 05
A size breakdown you can trust
Original, minified, and gzip sizes update as you type, next to the exact percentage saved. The gzip figure is the one 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
Read the breakdown below the options to confirm the gain, with the original, minified, and gzip sizes and 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 as you type, with no button to press and no delay between editing and seeing the result.
- A parse error is shown in place with its message, instead of quietly producing broken or empty 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 theJavaScript Minifier , and when you would rather expand and tidy code than shrink it, theSQL Formatter formats the other direction.
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.
- 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.
- 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 must be compiled to plain CSS first, since only standard CSS is understood here.
- A syntax error stops minification and is reported rather than worked around, so badly broken input will not produce partial output.
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. Judge the real gain by the gzip figure shown here.
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 number is the honest one.
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, calc expressions, and the rest of modern CSS are read and preserved. Minification understands the syntax, so valid constructs survive intact.
Can I minify Sass or Less files here?
Not directly, since this tool works on standard CSS. Compile your Sass or Less to plain CSS first, which most setups do in their build, then paste or upload that output here to minify 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.