CSS Minifier
Compress CSS to reduce file size or format for readability
Input CSS
Minified CSS
body{margin:0;padding:0;font-family:Arial,sans-serif;background:#fff;color:#333}.container{max-width:1200px;margin:0 auto;padding:0 16px}.header{background:#1a1a2e;color:#fff;padding:20px 0}.header h1{font-size:2rem;margin:0}.nav a{color:#fff;text-decoration:none;padding:8px 16px;display:inline-block}.nav a:hover{background:rgba(255,255,255,0.1);border-radius:4px}About the CSS Minifier
This CSS minifier strips comments, whitespace and line breaks from a stylesheet and reports the size saved. Formatting back the other way is available on the same page for when you need to read the file again.
A CSS minifier removes everything in a stylesheet that exists for human benefit. Comments, indentation and line breaks have no effect on rendering, and on a large stylesheet they account for a meaningful share of the bytes sent to every visitor.
Typical savings are 20 to 30% of raw size, and gzip compresses the result further because CSS is highly repetitive. Stylesheets are usually render-blocking, so the reduction lands directly on how quickly a page can paint.
The workflow that matters: keep the readable version in source control and minify as a build step. A minified file is unpleasant to edit and impossible to review in a diff, so minification should always be an output rather than a source. Reformatting is available here for when you only have the minified copy.
How to use the CSS Minifier
- Paste your CSS. Enter the stylesheet to compress.
- Minify. Comments, whitespace and line breaks are stripped.
- Check the saving. Compare the before and after sizes.
- Copy the output. Use it in production and keep the readable version in source control.
CSS Minifier features
- Strips comments, whitespace and line breaks
- Reports the size before and after
- Formats minified CSS back into readable form
- Copy the result
- Runs in your browser; nothing is uploaded
Frequently asked questions
How much smaller does CSS get?
Typically 20 to 30% before compression, and more for heavily commented stylesheets. Because CSS is served with gzip or brotli on top, the real-world saving is smaller than the raw figure suggests — but it is free.
What exactly is removed?
Comments, indentation, line breaks and redundant spaces around punctuation. Selectors, properties and values are untouched, so the stylesheet behaves identically.
Can I get the readable version back?
Yes, the same page formats in the other direction. It will not restore your comments — those are gone — but it will restore indentation and line structure, which is what you need to read a minified file.
Should I minify by hand or in the build?
In the build, for anything ongoing. Keep the readable stylesheet in source control and minify on deploy. This page is for one-off jobs and for reading a minified file you have been handed.