Minify CSS

Shrink CSS by stripping comments, whitespace, and redundant characters so your stylesheets download faster. Paste your CSS and the minified version appears instantly alongside a live character count and the percentage of size saved. Minification runs entirely in your browser.

CSS Input (135 chars)

Minified CSS (107 chars · 21% smaller)

.container{max-width:1200px;margin:0 auto;padding:0 20px}.header{background:var(--brand-color);color:white}

How was this tool?

Your feedback helps us improve Minify CSS.

Why use Minify CSS?

Every byte your visitor downloads costs time, and CSS is render-blocking, so the browser will not paint the page until it has your stylesheet. Minification removes the parts of a CSS file that exist only for human readability: comments, indentation, and the spaces around braces, colons, and semicolons. It is a sequence of text replacements: strip every comment block, collapse whitespace, and remove the space around selector and declaration punctuation. The result is byte-for-byte equivalent in the browser but noticeably smaller. This tool is intentionally lightweight, suited to hand-written CSS, a tutorial snippet, or a single landing-page stylesheet when you do not want a build pipeline. Property values and custom properties like --brand-color are never touched, only formatting is removed, so the rendered page looks identical. For large applications, a build-time optimizer such as cssnano or Lightning CSS goes further, merging duplicate rules and shortening colors, but for a quick, private, no-install minify, paste and copy here.

Key benefits

See the exact percentage of bytes saved before and after
Removes /* comments */, line breaks, and unnecessary spaces around braces and colons
Live output, no button to press to minify
Client-side only, your CSS is never uploaded
Handy for quick hand-offs when you are not running a full build pipeline

Features

Strips block comments and collapses all whitespace
Removes spaces around { } : ; , > + ~ selectors and declarations
Live character counter and savings percentage
One-click copy of the minified result

Popular use cases

Compressing a small stylesheet for a landing page without a bundler
Estimating how much a CSS file will shrink before adding a build step
Cleaning up CSS copied from a tutorial or design tool
Inlining critical CSS into a style tag at minimum size

How to use Minify CSS

1
Paste your CSS
Drop your stylesheet into the "CSS Input" box. The character count updates as you type.
2
Read the minified output
The compressed CSS appears instantly on the right, with the new size and percentage saved shown in the label.
3
Check the savings percentage
The label above the output box shows exactly how many characters were removed and what percentage smaller the result is.
4
Copy the minified CSS
Click "Copy Minified" and paste the result into your production stylesheet or build asset.

Frequently asked questions

Does minifying change how my CSS works?

No. Minification only removes characters that browsers ignore, comments and whitespace, so the rendered result is identical. The selectors, properties, and values are untouched.

Is this a full optimizer like cssnano?

No, and that is by design. This is a lightweight whitespace-and-comment minifier for quick use. Advanced optimizations (merging duplicate rules, shortening colors) need a dedicated tool like cssnano or PostCSS in your build.

Is my CSS sent to a server?

No. Everything happens in your browser. The CSS you paste is never transmitted or stored.

Why does the savings percentage vary so much?

Heavily commented or generously formatted CSS shrinks the most. Already-tight CSS with few comments will show a smaller reduction because there is less to remove.

Does it preserve CSS custom properties and other values?

Yes. The minifier only strips comments and whitespace, values themselves, including custom properties like --brand-color and var() references, are left completely untouched.

Last reviewed: July 2026

How was this tool?

Related tools