Output will appear here...CSS Minifier & Beautifier is a two-way stylesheet tool: it compresses CSS by removing everything the browser does not need — comments, whitespace, redundant semicolons, long-form hex colors and units on zero values — and it can reverse the process, expanding a single-line production bundle back into readable, properly indented rules. Every byte you strip from a render-blocking stylesheet is a byte the browser downloads and parses sooner, which directly feeds Core Web Vitals metrics like First Contentful Paint and Largest Contentful Paint.
The minifier is deliberately conservative. It is fully aware of string literals, url() values and calc() expressions, so it never removes the whitespace that calc(100% - 20px) depends on, never rewrites color-like text inside a content string, and never touches the spacing that distinguishes div :hover from div:hover. On typical hand-written stylesheets you can expect a 25–40% size reduction before gzip; combined with gzip or Brotli on the wire, minification still shaves a meaningful slice because compression works better on repetitive, comment-free input.
Everything runs 100% client-side in your browser. Your CSS is never uploaded, logged or stored on any server, which means you can safely paste proprietary design-system code, unreleased product styles or client work. It also works offline once the page is loaded — useful when you need a quick minify pass without wiring up a full PostCSS or esbuild pipeline.
Drop your stylesheet into the input area — a single rule, a component file, or a full production bundle. Both formatted and already-minified CSS are accepted.
Click Minify to compress for production, or Beautify to expand minified code into one declaration per line with a blank line between rules. For beautify, pick your preferred indentation first.
The tool reports the exact before/after size and percentage change (e.g. "12.4 KB → 8.1 KB, −34%"), so you know precisely what the transform bought you before you ship it.
Copy the result to your clipboard with one click, or download it as a .css file ready to drop into your build output or CDN.
Respects string literals, url() values and calc() spacing — it compresses aggressively without ever corrupting valid CSS
Rewrites #ffffff to #fff and 0px to 0 where provably safe, squeezing extra bytes beyond plain whitespace removal
Keeps /*! banner comments intact so library license headers survive minification, matching standard build-tool behavior
Expands minified bundles into readable rules with configurable 2, 4 or 8 space indentation for debugging production issues
Minify HTML markup for faster page loads or beautify it for readable, indented source
Format messy SQL into readable, indented queries or minify SQL to a single line
Format, validate, and minify JSON data
Create beautiful CSS gradients with live preview
0 comments
No comments yet. Be the first to share your thoughts!