How to use
- Paste your stylesheet into Your CSS.
- Check Shorten values if you want shorter hex colors and numbers.
- For input over 200 KB, click Minify CSS; smaller input updates automatically.
- Review Minified CSS and the Original, Minified and Saved figures.
- Click Download to save the result as a .min.css file.
Examples
Keep a license header
Input
/*! MIT */
/* Header styles */
.site-header {
background: #ffffff;
padding: 16px;
}
Output
/*! MIT */
.site-header{background:#ffffff;padding:16px}Shorten colors and numbers
Input
.product-card {
color: #FFFFFF;
margin: 0px 0.50em 10.0px;
opacity: 0.80;
flex: 1 1 0px;
}
Output
.product-card{color:#fff;margin:0 .5em 10px;opacity:.8;flex:1 1 0px}Compact responsive CSS, keeping final semicolons
Input
@media screen and ( min-width : 768px ) {
.checkout > .order-summary {
width: calc(100% - 32px);
padding: 16px;
}
}
Output
@media screen and (min-width:768px){.checkout>.order-summary{width:calc(100% - 32px);padding:16px;}}Tips
- Need readable CSS again? Format it.
- Minify HTML too.
FAQ
Does minifying CSS merge duplicate rules or remove fallbacks?
Duplicate selectors are not merged, and repeated declarations are kept. Rules, declarations and at-rules stay in their original order.
Is my CSS uploaded to a server?
Minification runs in your browser, and the tool sends no network request containing your CSS. The page uses Google Analytics for tool events, but those events contain no CSS.
How do I convert minified CSS back to readable CSS?
Click Format → to open the result in CSS Formatter. Formatting cannot restore comments removed during minification.
Can I minify SCSS or LESS here?
Compile SCSS or LESS to CSS first; this tool does not compile them. CSS syntax errors show a line and column and highlight the error line in Your CSS.