CSS Minifier

A CSS minifier does the one job stylesheets cannot skip: CSS is render-blocking, and the browser will not paint the page until the stylesheet has downloaded and parsed. That makes it the one asset where minification has a direct, measurable effect on how fast a page appears, rather than just on how much bandwidth it uses. When you minify CSS, comments and insignificant whitespace disappear, the cascade is untouched, and first paint arrives sooner.

This free CSS minifier compresses stylesheets in your browser: paste the sheet, press the button, read the before and after byte counts, then copy or download the minified CSS. Selectors, properties and values stay exactly as you wrote them.

What a CSS minifier removes

Comments go first — they are notes for humans and are never part of the cascade. Then the whitespace that carries no meaning: the newlines between rules, the indentation inside a block, and the spaces around braces, semicolons and colons. A declaration written across four lines becomes one, and the whole sheet collapses to a single stream of rules.

What a CSS minifier must never touch

CSS uses whitespace as syntax in a few places, and this is where naive minifiers break stylesheets:

The rule the minifier follows is simple: collapse a run of whitespace to a single space where a space is meaningful, and delete it entirely where it is not. Getting that distinction right is the whole job.

What this tool deliberately does not do

A full CSS optimiser can also shorten hex colours, convert rgb values, strip units from zero lengths, merge duplicate rules and reorder declarations. Those transforms change the text of your CSS and occasionally change behaviour, so they belong in a configurable build step you can test against your real pages. This minifier does the safe, universal part — comments and whitespace — and leaves the rest alone.

Where CSS minification fits

Keep the readable, commented stylesheet in source control and minify during the build, so the file you ship is small and the file you maintain is legible. For a quick one-off — inlining critical CSS into a document head, or shrinking a snippet for an email — minifying by hand here is the fastest route.

How much smaller does minified CSS get?

A readable, commented stylesheet typically shrinks by 20 to 35 percent, and a heavily indented design-system file can save more. Comments are the reliable first win — style guides written as block comments are common in large codebases and are pure overhead in production. Over transport compression the marginal gain narrows, but a minified stylesheet also parses faster, and parsing time sits on the critical path to first paint in a way bandwidth savings do not.

Why stylesheet size still matters

Modern sites ship more CSS than they use — audits routinely find that the majority of rules in a delivered stylesheet match nothing on the page. Minification does not remove unused rules (that is a different, riskier optimisation), but it makes every rule that does ship cheaper. For a stylesheet on the critical path the effect is doubled: fewer bytes to download before rendering can begin, and fewer tokens for the parser to walk before the cascade can be computed. Minified CSS plus transport compression is the standard production setup for exactly this reason.

Minify CSS for critical and inline styles

The classic manual use case is critical CSS: the above-the-fold rules you inline into the document head to eliminate a render-blocking round trip. That block needs to be as small as possible, because it is counted inside the HTML response itself. The second is email styling, where every client imposes its own size ceiling and inline styles bloat fast.

Everyday reasons to minify CSS by hand:

• Inlining a critical-CSS block into a page head before a launch.
• Shrinking email styles under a client's size ceiling.
• Compressing a theme or widget stylesheet pasted into a CMS field with a length limit.
• Preparing a one-file demo or prototype where a build step would be overkill.

A free CSS minifier with no upload

Proprietary styles, unreleased design tokens and brand variables are exactly the content that should not be pasted into a public form. This CSS minifier runs the entire compression locally — comments out, whitespace collapsed, strings and url() values preserved — and reports the byte saving so you know what you gained. Paste, minify, copy or download: private, instant and free, with the readable original left untouched in your repository.