CSS Minifier and Beautifier
This CSS minifier shrinks your stylesheet by removing comments, extra spaces, line breaks and unneeded semicolons, so your pages download faster. It can also do the reverse and beautify minified CSS into neatly indented code that is easy to read and edit.
Everything runs in your browser. Nothing you enter is sent to or stored on our server.
Quick answer: Paste your CSS and the minified version appears on the right, usually 20 to 40 percent smaller. Click Beautify to turn compressed CSS back into readable, indented code.
How to use the CSS minifier
- Paste your stylesheet into the left box. A short sample is loaded so you can see the result.
- Click Minify to compress it, or Beautify to format it. The byte counts show how much you saved.
- Leave Keep /*! license */ comments ticked to keep copyright notices that start with /*!, as most build tools do.
- Copy the result or download it as a .css file.
What the minifier removes
- Comments, except /*! license comments if you choose to keep them.
- Line breaks, tabs and repeated spaces.
- Spaces around braces, colons, semicolons, commas and the > and ~ combinators.
- The last semicolon in each rule, which CSS does not need.
Text inside quotes and url() values is never changed, and spaces around + and − are kept so calc() keeps working. This makes it a safe minifier you can use on any stylesheet without testing every page again.
Why minify CSS?
CSS blocks the page from showing until it has downloaded, so smaller files mean a faster first paint and better Core Web Vitals scores. Minifying typically saves 20 to 40 percent before compression, and still helps after gzip or Brotli. Keep your readable source file for editing and serve the minified copy on your live site.
Minify CSS in WordPress and build tools
On WordPress, caching plugins such as LiteSpeed Cache, WP Rocket and Autoptimize can minify CSS automatically. In a build pipeline, use cssnano with PostCSS, esbuild or Lightning CSS. These also do deeper optimisations such as merging rules and shortening colors. This page is handy for a quick one-off file, a snippet for a page builder, or reading someone else’s minified CSS.
More developer tools: the JSON formatter beautifies and validates JSON, the hex to RGB converter converts colors, and the diff checker compares two versions of a file.
FAQ
Can minifying break my CSS?
Not with this tool’s safe rules, as long as the original CSS is valid. If a rule was already broken, minifying can make the problem harder to spot, so beautify it first to check.
Does it support SCSS or LESS?
Plain CSS works best. Compile SCSS or LESS to CSS first, then minify the output.
More free tools
See all of them on the QuickOnlineTips free online tools page and play our free online games.