CSS minifier
Paste CSS to get a smaller copy for your site. It removes only what does not affect rendering and never rewrites values.
Loading the tool…
Processing and privacy: The result is calculated inside your browser and your data is not sent to any server.
How to use it
- Enter css code.
- The result appears straight away and updates as you edit.
- Copy the result, or copy a link that keeps the same values to share it.
How it is calculated
Comments are removed (except /*! */), whitespace runs become one space, spaces around { } ; , > ~ and after colons are dropped, and the last ; before } goes. Quoted strings are protected. Saving = (original - minified) / original × 100.
Example
Result: Minified CSS: .btn{color:#fff;padding:8px 16px}.btn:hover,.btn:focus{opacity:0.9}; Original size: 105 bytes; Minified size: 67 bytes.
/* buttons */
.btn {
color : #fff ;
padding: 8px 16px;
}
.btn:hover , .btn:focus {
opacity: 0.9;
}.btn{color:#fff;padding:8px 16px}.btn:hover,.btn:focus{opacity:0.9}Limits and caveats
- It does not merge duplicate rules or shorten values such as #ffffff to #fff.
- It keeps the space before a colon in selectors such as a :hover, since removing it changes the meaning.
Questions about this tool
Can minifying break my styles?
The tool removes only whitespace and comments, and keeps the spaces around + and - inside calc(), which CSS requires.
Why is one comment still in the output?
Comments starting with /*! are kept on purpose because they usually carry a license notice.
Do I need this if my server uses gzip?
Usually yes. The two work together, and a minified file stays smaller after gzip.