RevealTheme logo

CSS Minifier

Strip comments, whitespace, and unnecessary characters from CSS to reduce file size.

How to use this tool

  1. 1

    Paste your CSS — a single rule, a component stylesheet, or an entire file.

  2. 2

    The minified result and the byte savings appear instantly below the input.

  3. 3

    Copy the minified output, or compare the before/after byte count to see the reduction.

What is CSS minification and why does it matter?

CSS is render-blocking: a browser won't paint a single pixel of your page until it has downloaded and parsed every stylesheet in the <head>. That puts CSS file size directly on the critical rendering path — the chain of steps between a request and the first visible content. Minification shrinks that file by removing everything a browser doesn't need to interpret the rules: comments, indentation, line breaks, the spaces around braces, colons, and semicolons, and the redundant final semicolon before a closing brace. None of this changes how the CSS behaves; it only changes how many bytes travel over the wire. On hand-written CSS the saving is typically 20–40% before compression, and minified CSS also compresses better under gzip or Brotli because the byte patterns are more regular. In a production build you should minify automatically with cssnano, Lightning CSS, or your bundler so source files stay readable and you get a source map — this tool is for the ad-hoc cases: a snippet from a tutorial, an email signature, or a CMS field that never runs a build step. It collapses whitespace and strips comments; it does not rewrite color values or merge rules, so the output stays a faithful, predictable version of what you pasted.

Common use cases

  • Shrink a critical-CSS snippet you're inlining into the <head> to remove a render-blocking request.

  • Compress CSS for an HTML email or newsletter, where every kilobyte counts and there's no build pipeline.

  • Paste CSS into a CMS or page-builder field that doesn't minify automatically (WordPress 'Additional CSS', Shopify theme settings).

  • Check how much weight a third-party stylesheet adds before deciding whether to self-host it.

  • Clean up CSS copied from DevTools, which arrives with computed-style comments and inconsistent spacing.

  • Produce a one-line version of a rule to paste into a chat, ticket, or code-review comment.

Frequently asked questions

Will minification ever break my CSS?
It shouldn't — collapsing whitespace and removing comments preserves meaning. If working CSS breaks after minifying, the source almost always had a latent error (a missing semicolon, an unclosed brace) that the browser silently tolerated but the collapsed form exposed. Run the output through our CSS Formatter to inspect the structure if something looks off.
How much smaller will my file get?
Expect 20–40% on typical hand-authored CSS. Framework output (Tailwind, Bootstrap) is often already partially optimized, so the raw saving is smaller — but the bigger win there is gzip/Brotli, which minified CSS compresses more efficiently once whitespace is gone.
Should I minify or just rely on gzip?
Both. Gzip/Brotli compress the bytes in transit, but minification reduces the bytes the browser must parse after decompression, and the two stack — minified-then-gzipped is smaller than gzipped alone. Minification also strips comments you may not want shipped to users.
Does this tool rewrite values like #ffffff to #fff?
No — it focuses on safely removing whitespace and comments rather than rewriting values or merging selectors. That keeps the output predictable and identical in behavior. Build-time minifiers like cssnano do the more aggressive value-level optimizations when you want them.
Does it remove unused CSS?
No — that's a separate optimization (purging/tree-shaking) that requires scanning your HTML and JS to see which selectors are actually used. Tools like PurgeCSS or Tailwind's JIT engine do that. Minification only removes formatting, never rules.
Is my CSS uploaded anywhere?
No. Minification runs entirely in your browser with JavaScript — nothing is sent to a server, so you can paste proprietary stylesheets safely.

Related tools