CSS Minifier and Beautifier
Compress CSS with csso or format it with clean indentation.
Use via API
Minify CSS with csso (optionally merging and reordering rules) or pretty-print it. Syntax problems the parser recovered from are returned as warnings. Send JSON, get JSON back.
POST https://pithlab.com/api/v1/tools/css-minifier
curl https://pithlab.com/api/v1/tools/css-minifier \
-H "Authorization: Bearer $PITHLAB_KEY" \
-H "Content-Type: application/json" \
-d '{"input":"/* Buttons */\n.btn {\n color: #ffffff;\n margin: 0px 0px 0px 0px;\n}\n.btn { padding: 4px; }"}'About the CSS Minifier
Minify CSS to shrink stylesheets, merging duplicate rules and shortening colours, or beautify it for reading. See the size before and after and the percentage saved.
How to use the CSS Minifier
- Paste your CSS.
- Press Minify to compress it. Restructure merges matching rules for extra savings.
- Press Beautify to format compressed CSS with one declaration per line.
- Check the size before and after, then copy or download the result.
Examples
Input
/* Buttons */
.button {
color: #ff0000;
padding: 0px 0px 0px 0px;
margin: 10px;
}
.button:hover {
color: #FF0000;
}
Output
.button{padding:0;margin:10px}.button,.button:hover{color:red}Input
/*! MIT */
h1 { font-weight: bold } h2 { font-weight: bold }Output
/*! MIT */
h1,h2{font-weight:700}Input
.a{color:red;margin:0}.b>.c{display:none}Output
.a {
color: red;
margin: 0
}
.b>.c {
display: none
}Frequently asked questions
What does the minifier change?
It removes whitespace and comments, shortens values such as #ff0000 to red and 0px to 0, and with Restructure on it merges rules that share selectors or declarations.
Can restructuring break my styles?
csso only merges rules when the result is equivalent, but very unusual cascade tricks can be affected. Turn Restructure off for a safer, whitespace and value only minification.
Why are some rules missing from the output?
Parts the CSS parser cannot understand are dropped and listed as warnings with their line and column. Fix those lines and minify again to keep them.
Which comments are kept?
Comments starting with /*! are kept when the option is ticked, as they usually hold licence notices. All other comments are removed.