CSS Minifier
Compress CSS to ship it smaller, or beautify minified CSS back into readable code - with the size saving shown.
Why minify CSS
Every byte of CSS is downloaded and parsed before a page can finish rendering. Comments, generous indentation and blank lines make a stylesheet pleasant to work on but do nothing for the browser. Minifying removes all of that, so the file transfers faster and the page paints sooner - a small win that adds up across every visitor.
What safe minification removes
- All
/* comments */ - Line breaks, tabs and runs of spaces between rules and declarations
- Spaces around
{,},:,;and, - The final semicolon before each closing brace
What it never touches: your selectors, property names, values, and anything inside quotes or
url(). That last point matters - a naive minifier that collapses every double
space would corrupt content: "hello world". This one tracks string boundaries so
that never happens.
Beautify for reading and debugging
Inherited a compressed stylesheet with no line breaks? Switch to Beautify and it comes back formatted: one selector per block, each declaration on its own line, a space after every colon, and clean two-space indentation. It is the fastest way to make a minified file reviewable again before you edit it.
Building the front end? Pair this with the CSS gradient generator and the color picker for styling, or the JSON formatter when you switch back to data.