CSS Minifier & Beautifier
Paste a stylesheet to remove comments and spaces and see how many bytes you save. Switch to Beautify to lay minified CSS out neatly.
Worked examples
Shrinking a small stylesheet
h1 { color: #333; margin: 0.5em 0; }
h1{color:#333;margin:.5em 0}
Spaces around braces, colons and semicolons are removed, the final semicolon is dropped and the leading zero of 0.5 is trimmed.
Removing comments from CSS
/* brand colours */ p { color: red; }
p{color:red}
Comments are removed, except those that start with /*! which are often kept for licence notices.
About CSS Minifier & Beautifier
Minifying CSS removes everything a web page does not need in order to apply your styles: comments, line breaks, indents and the spaces around braces, colons and commas. The same rules still apply, but the file is smaller, so it downloads faster and uses less bandwidth. This tool shows the original size, the minified size and the percentage saved, so you can see the difference straight away, and the result updates as you type or paste. It is a quick way to check a stylesheet before it goes live.
Text in quotes and url() values are never touched, so a content string or a data link stays intact, and custom property values are kept exactly. Comments that start with /*! can be kept, which is useful for licence notices. Switch to Beautify to do the reverse: a minified file is spread out with one declaration per line and a blank line between rules, and you can choose two spaces, four spaces or a tab for the indent. Long files are no problem, and the result can be copied or saved with one click.
How to use CSS Minifier & Beautifier
- Paste your CSS into the input box, or open a .css file.
- Leave the option on Minify to compress, or choose Beautify to format.
- Tick or untick the option to keep comments that start with /*!.
- Check the size saved, then copy or download the result.
Common uses
- Shrinking a stylesheet before publishing a site
- Reading a minified file copied from a live page
- Comparing two versions of a stylesheet after formatting both the same way
- Checking how many bytes a rewrite has saved
Frequently asked questions
How do I minify CSS?
Paste your stylesheet into the input box and leave the option on Minify. The compressed version appears on the right with the bytes saved and the percentage. Copy it or download it as a .min.css file and use it in place of the original on your site.
Is minified CSS the same as the original?
It applies the same styles. Only comments and whitespace are removed, along with the last semicolon in each rule and leading zeros in numbers. Quoted text, url() values and custom property values are left exactly as written, and no colour, unit or selector is rewritten.
Can I turn minified CSS back into readable CSS?
Yes. Choose Beautify and the file is laid out with each rule on its own lines, one declaration per line and a blank line between rules. Comments that were removed when the file was first minified cannot come back, but everything else is restored to a readable layout.
How much smaller will my CSS get?
It depends on how the original was written. Well commented, widely spaced stylesheets often shrink by a quarter to a half, while a file that is already compact saves very little. The size panel shows the exact figures in bytes, measured before any compression your web server applies.
What happens to comments?
Normal comments are removed when minifying. Comments that start with /*! are usually licence notices, so they are kept unless you untick the option. When beautifying, every comment is kept and placed on its own line at the matching indent, so nothing is lost.