How to minify CSS
- Paste your CSS into the box above.
- Read the minified output that appears right away.
- Check the saving in characters and as a percent.
- Keep any license banner aside if your terms require it.
- Copy the result or download it.
What this CSS minifier removes
- All comments so check license terms before you ship.
- Whitespace between selectors, declarations and values.
- The last semicolon before every closing brace.
- Spaces around colons, commas and combinators.
- No other changes so selectors and order stay put.
- No change to text inside strings.
What a CSS minifier actually saves
A hand written stylesheet is mostly whitespace and comments by character count. Indents and blank lines cost bytes. So do spaces after colons and helpful notes. The browser throws all of that away the moment it reads the file.
This step usually cuts 20 to 35 percent from a formatted file. Files with long comments shrink even more. CSS also blocks rendering. The browser will not paint until it reads the stylesheet. So the saving lands at the most costly moment of a page load.
Why this CSS minifier stays careful
Aggressive tools do much more. They merge duplicate selectors and combine shorthand. They turn #ffffff into #fff. They reorder declarations and drop rules they think nobody uses. Those tricks save more. They also change how pages look now and then.
CSS depends on order. A repeated selector later in a file often overrides an earlier one on purpose. A longhand property after a shorthand is often deliberate. JavaScript may target a rule that looks unused. This tool does none of those tricks. You can ship the output without a visual check.
The space the tool keeps
The tool keeps one space where it separates two values. Take margin: 0 auto as an example. Remove that space and you get 0auto. That is not a valid value. Naive minifiers break stylesheets right here.
Before and after
| Part | Before | After |
|---|---|---|
| Comment | /* header */ | Removed |
| Spacing | color : red ; | color:red |
| Combinator | ul > li | ul>li |
| Two values | margin: 0 auto | margin:0 auto |
Comments and licenses
The tool removes every comment. That includes the license banner at the top of open source frameworks. Many licenses require that notice in copies you share. So check the terms before you ship a minified third party file. The usual habit is simple. Keep the banner aside and paste it back on top after you minify.
Minification is only part of the story
Servers that send CSS with gzip or brotli save even more. Whitespace repeats a lot and compresses very well. A minifier on top still helps a little. Use both together for the best result.
A safe CSS minifier workflow
- Keep your readable stylesheet as the source.
- Make every edit in that source file.
- Minify a copy right before you upload.
- Add the license banner back on top if needed.
- Name the output clearly such as style.min.css.
A clear name stops teammates from editing the wrong file. The next build would wipe their changes.
Tips for faster stylesheets
- Delete rules that no page uses any more.
- Load only one main stylesheet where you can.
- Turn on gzip or brotli on your server.
- Set long cache times for files that rarely change.
- Inline only the small styles a page needs first.
Common CSS minifier problems
My file barely shrank
It was already minified. Run your source file through the tool instead.
A style looks different after minifying
This tool only removes whitespace and comments. Check that you copied the full output. Then check for a syntax error in the source.
How the CSS minifier reads your file
The tool reads your CSS token by token. It knows where strings start and end. So a semicolon in quotes stays put. It drops the space between tokens only where the browser does not need it. The result parses to the same rules as your source.
Who uses a CSS minifier?
Front end developers prepare files for launch. WordPress users speed up custom themes. Email designers trim inline styles. Agencies polish landing pages before a client review.
Your code stays private
The tool works in your browser and uploads nothing. Need to read the file again later? Use the CSS formatter. Want to shrink markup and scripts too? Try the HTML minifier and the JavaScript minifier.