Skip to content

CSS Minifier

Minify CSS to make it smaller, or beautify minified CSS to make it readable.

Mode

Runs in your browser — nothing you enter is sent to a server.

How the CSS Minifier works

Minify removes comments and every space the browser doesn't need, and shows how many bytes you save. It's deliberately safe: strings, url() values and license comments (/*! … */) are kept, spaces that change meaning — like the one in div :first-child or inside calc() — stay, and values are never rewritten.

Beautify does the opposite: it formats minified CSS with one declaration per line and indented blocks, so you can read it.

Formula

saved = (1 − minified bytes ÷ original bytes) × 100%

Examples

Minify

.a > .b , .c { color : red ; margin: 0 auto; } → .a>.b,.c{color:red;margin:0 auto}

calc() is safe

width: calc(100% - 2 * 10px); keeps its spaces — without them, calc() stops working.

Frequently asked questions

How much smaller will my CSS get?

Typically 15–30% before compression, depending on comments and formatting. Your server's gzip or Brotli compression saves much more on top.

Why doesn't it shorten colors or remove units?

Those tricks save a few bytes but can break edge cases. Build tools like Lightning CSS or cssnano do deeper optimization as part of a build.

Can it minify JavaScript too?

No — JavaScript needs a full parser to minify safely. Use your build tool for that.

Related tools

JSON Formatter

Format, validate and minify JSON, with the exact line and column of any error.

Developer Tools

Color Converter

Convert colors between HEX, RGB, HSL, HSV and CMYK, and check their contrast against white and black.

Converters

Color Palette Generator

Build color palettes from a base color with color-wheel harmonies, with HEX, RGB and HSL values.

Generators