CSS Minifier & Optimizer

Minify CSS without sending the file anywhere

Stylesheets often ship with comments, extra semicolons, long hex colors, and indentation that only helped the author. On a first paint budget, those bytes compete with fonts and images. A build step (cssnano, esbuild, Lightning CSS) is the right long-term fix. This page is for a paste: a theme snippet, an email CSS block, or a file you cannot put in CI yet. The walk is entirely client-side. Empty input clears the output and the KPIs. Non-empty input updates Original File Size (KB), Minified File Size (KB), bytes removed, and Compression Savings (%) as you type.

Three toggles, all on by default. Remove comments drops /* ... */ outside strings. Remove unnecessary semicolons drops a ; that sits immediately before }. Shorten hex color codes turns #ffffff into #fff when each pair matches. Turn any toggle off to compare savings. The efficiency badge is green above 30% saved, blue from 10% to 30%, and gray under 10%. Heavily commented files usually land in green. Already-minified CSS lands in gray, which is the honest result.

bytes = TextEncoder.encode(css).length
saved % = (original - minified) / original x 100
#ffffff -> #fff when pairs match

Whitespace collapse removes runs of spaces, tabs, and newlines, then deletes a space next to { } : ; , > + ~ !. Selector descendants keep a single space: .a .b stays two classes. That is the usual tradeoff of a regex minifier versus a full CSS parser. If you rely on exotic syntax that a parser would understand and a string walk would not, keep the production pipeline as the source of truth and use this page for estimates.

What is preserved on purpose

Quoted strings are copied byte-for-byte, including content: " ; ". A naive replace of ; or spaces would break generated content and data URIs. url(...) is treated as a unit: quoted URLs reuse the string reader, unquoted URLs copy until the closing parenthesis. Hex shortening does not run inside those regions, so a hash in a query string stays put.

Sizes are UTF-8 bytes, not UTF-16 string length. A file full of © or emoji would be under-counted if we used string.length. KB on the cards is bytes / 1024 with two decimals. Copy Minified CSS uses the Clipboard API and a 1px off-screen textarea fallback. Download writes styles.min.css. Both actions stay disabled while the input is empty so you cannot copy a blank file by mistake.

This is not an autoprefixer, a CSS modules compiler, or a syntax validator. Invalid CSS may still minify. Nested CSS is usually fine because braces are not rewritten, only spacing around them. If a construct fails in a browser after minify, paste the original into your test page first: the bug may have been in the source. For config files rather than CSS, use the JSON to YAML Converter.

Reading the savings number

A 40% saving on a 2 KB snippet is 0.8 KB. That is not a Lighthouse win by itself. A 40% saving on a 180 KB theme CSS file is. Use the Original and Minified KB cards, not only the percentage. If savings sit under 10% and you already run a bundler, you are done. If they sit over 30% on production CSS, comments and formatting are still shipping to users and the badge is telling you to put minify in CI.

Pair payload work with the rest of the site when the CSS is for a landing page that also carries campaign URLs: build those with the UTM Builder. Do not minify by pasting into a Slack thread and back; this textarea is the workspace. When the number looks right, download styles.min.css and attach it to the release, or copy into the style tag you actually ship. Clear empties the input, zeros the three KPI cards, and disables copy and download until you paste CSS again.

Frequently Asked Questions (FAQ)