How to use the CSS Minifier tool
- Paste or open your CSSPaste your stylesheet, or click “Open file” to load a .css file.
- Choose optionsShorten values, remove empty rules, and keep or drop /*! license */ comments.
- See the savingsThe minified CSS appears instantly with original, minified and gzip sizes.
- Copy or downloadCopy the result or download it as .min.css for your website.
What it does
- Removes comments and whitespaceStrips indentation, line breaks and comments that browsers don’t need.
- Shortens values safely0.50em → .5em, 0px → 0, #ffffff → #fff, without touching selectors, strings or custom properties.
- Keeps what mattersStrings, url() values, calc() expressions and license comments are preserved exactly.
- Removes empty rulesDrops selectors with no declarations, including inside media queries.
- Shows real savingsCompare sizes before and after, including the gzip size your server will actually send.
Why minify CSS?
CSS is a render-blocking resource: the browser must download and parse it before it can show the page. Smaller stylesheets download and parse faster, improving metrics like First Contentful Paint and Largest Contentful Paint that affect both user experience and Google’s Core Web Vitals. Minification typically shrinks hand-written CSS by 20–40%.
Example
Before:
.card {
margin : 0px auto ;
color : #FFFFFF ;
padding: 0.50em 1.0em;
}
After:
.card{margin:0 auto;color:#FFF;padding:.5em 1em} What is changed, and what isn’t
| Changed | Never changed |
|---|---|
| Comments (except /*! … */) | Selectors, including spaces that change their meaning, like a :hover |
| Indentation, line breaks, extra spaces | Text inside quotes, such as content values |
| Last semicolon in each block | url() values and data URIs |
| Leading and trailing zeros, zero units | Custom properties (--variables) and calc() spacing |
| Six-digit colors that can be three digits | The order of your rules |
Minify and compress
Minification and server compression work together. Gzip or Brotli on your server reduce the transfer size much further, which is why the tool also shows the gzipped size. Always keep your original, readable CSS for editing, and serve the minified version on your live site. Most build tools (Vite, webpack, Laravel Mix) can minify automatically; this tool is ideal for quick jobs, WordPress themes and static sites.
Also minify your markup with the HTML Minifier and your scripts with the JavaScript Minifier.