Open menu

CSS Minifier & Beautifier

Shrink a stylesheet for production or turn minified CSS back into something readable. Minify uses Lightning CSS by default, which only makes changes that can't alter how the page looks, such as removing whitespace and comments, shortening colors and merging longhand properties. CSSO is available for structural optimization that can merge rules. License comments starting with /*! are kept, you can create a source map, compare before and after, measure gzip and brotli sizes and process several files at once. Everything runs in your browser.

Your code

Paste code, or drop files here. Engines load only when you press the button.

Preset

Safe makes only changes that can't alter behaviour; Max squeezes harder (e.g. top-level mangling for modules).

Result

Files

.js .mjs .css .html .htm .svg .json — several at once for a batch
Engines and licenses

This tool uses these open-source engines, loaded only when needed:

  • Terser — JavaScript minifier (BSD-2-Clause)
  • Lightning CSS — CSS minifier (safe) (MPL-2.0)
  • CSSO — CSS minifier (structural) (MIT)
  • HTMLMinifier (Terser) — HTML minifier (MIT)
  • SVGO — SVG optimizer (MIT)
  • js-beautify — JS, CSS and HTML beautifier (MIT)
  • jsdiff — Diff view (BSD-3-Clause)
  • fflate — ZIP download for batches (MIT)
  • brotli-wasm — Brotli size estimate (when the browser has no native brotli) (Apache-2.0)

100% in your browser: your code is processed on this device and never uploaded.

How to use the CSS minifier

  1. Choose Minify or Beautify.
  2. Paste your CSS or drop .css files (several at once for a batch).
  3. Pick the engine and options for Minify: Lightning CSS (safe) or CSSO (structural), keep license comments, create a source map. For Beautify, choose the indentation.
  4. Press the button. The first run loads the engine in a background worker.
  5. Copy or download the result, open the diff view or measure gzip and brotli sizes.

How it works

Engine What it does When to use it
Lightning CSS (default) Parses CSS, removes whitespace and comments, shortens colors and values, merges longhands into shorthands where equivalent Almost always: output behaves exactly like the input
CSSO, structural Everything above, plus merging identical rules and declarations across the stylesheet When every byte counts and you can test the result
js-beautify Re-indents rules, nested rules and at-rules, one declaration per line Reading or debugging minified CSS

License comments (/*! … */) are preserved unless you turn the option off.

Worked examples

  • .card { color: #ff0000; margin: 0px 0px 0px 0px; } becomes .card{color:red;margin:0} with Lightning CSS.
  • Two rules for .button with different padding: CSSO can merge them into one, keeping the last value, which is why it warns that structural changes can affect the cascade.
  • A one-line third-party stylesheet: Beautify turns it into indented, readable rules.

Tips and common mistakes

  • Edit the source, not the minified file. Beautify a minified file first if it’s all you have, then minify again.
  • Keep license comments for third-party CSS; many licenses require it.
  • Combine before you minify so whitespace between files is removed too.
  • Always serve CSS with gzip or brotli; the savings multiply.

How minification fits a build pipeline

Most production sites minify CSS automatically: bundlers such as Vite, webpack and esbuild run a minifier when you build for production, and Lightning CSS is one of the engines they use. This tool helps when you don’t have a build step, such as a small static site, a theme, an email template or a CMS snippet, or when you want to check what a minifier would change.

Privacy

Stylesheets can contain internal URLs, client names or unreleased product names in comments and selectors. Because this tool runs entirely in your browser, nothing you paste leaves your device.

Frequently asked questions

Is it safe to minify CSS?

With the default Lightning CSS engine, yes: it parses CSS fully and only applies transformations that behave identically, for example #ff0000 to red or margin: 0px 0px 0px 0px to margin: 0. CSSO's structural mode can merge and reorder rules for smaller output, so check the result if your cascade order matters.

How much does minification save?

Typically 15–30% before compression, depending on how many comments and how much whitespace the source has. Your server's gzip or brotli compression saves much more on top, so use both.

Does my CSS get uploaded anywhere?

No. Everything runs in a background worker in your browser; nothing is sent to a server.

Which comments are kept?

Comments starting with /*! are treated as license or legal notices and kept by default. All other comments are removed. Turn off Keep license comments to remove those too.

Should I minify CSS by hand or in my build?

Use your build tool for production sites so it happens automatically. This tool is handy for quick one-off files, snippets and checking how much minification would save.

Can I turn minified CSS back into readable CSS?

Yes. Switch to Beautify to re-indent rules with one declaration per line. Comments removed by a minifier can't be restored.

Sources