CSS Minifier & Beautifier

What it does & when you need it

You inherit a stylesheet that arrived as one 4,000-character line with no breaks, or you've hand-written CSS and want to ship it as small as possible. This tool does both directions. Beautify re-indents a compressed or messy stylesheet into readable, consistently formatted rules so you can actually review a diff or debug a selector. Minify strips comments and collapses insignificant whitespace to shrink the file you serve. Everything runs in your browser on the same string — paste proprietary or unreleased styles and nothing is uploaded anywhere.

Reach for it when you're auditing a third-party theme, preparing inlined critical CSS for a <style> block in your <head>, cleaning up generated output before committing, or just making a minified file legible enough to understand what a rule is doing.

How to use

Paste your stylesheet into the input.css buffer, press Sample to load an example with comments and nesting, or Upload a .css file.
Pick a mode with the Beautify / Minify toggle. The output pane updates as you type — there's no separate run step.
On Minify, the output status bar reports the before/after size, e.g. 1,240 → 820 bytes, so you can see exactly what you saved.
Press Copy output (or Ctrl/Cmd + Enter) to grab the result, or use the Copy button on the output buffer.

Things worth knowing

Minifying is safe because most CSS whitespace is insignificant — but not all of it. Collapsing the spaces and newlines between rules and declarations changes nothing about how the browser parses them. The exceptions are the places where a space is a real token: inside calc(100% - 32px) the spaces around the operator are required, and in multi-value properties like margin: 0 auto the gap separates two values. This tool preserves those and only removes the whitespace that genuinely doesn't matter, so minified output renders identically to the source.

Minification never touches specificity or source order. It doesn't reorder declarations, merge selectors, or rewrite anything semantic — it only deletes comments and redundant whitespace. Because the cascade depends on specificity and the order rules appear, and both are untouched, your page looks exactly the same before and after. That's what makes it a mechanical, low-risk build step.

It won't expand or collapse shorthand. Turning margin: 0 auto into four margin-* longhand declarations, or folding four longhands back into one shorthand, is a separate transformation with its own edge cases (like how margin resets all four sides). This tool deliberately leaves shorthand exactly as you wrote it.

Over HTTP, the win is smaller than you'd think. If your server sends CSS with gzip or brotli — nearly every host does — the compressor already eliminates most of the repeated whitespace on the wire, so minifying on top of that saves relatively few transferred bytes. Where minification still earns its keep is the uncompressed parse size the browser works with after decompression, and especially inlined critical CSS, where every character sits in your HTML and isn't always compressed the same way.

Once your CSS is clean, you might tidy the surrounding HTML or a script bundle the same way, sanity-check a color you spotted with the color converter, or format the JSON config that generated the stylesheet.

Examples

Beautify a minified stylesheet

.card{width:calc(100% - 32px);margin:0 auto;padding:16px;color:#333}.card:hover{box-shadow:0 2px 8px rgba(0,0,0,.15)}

Beautify expands the one-liner into indented, readable rules while keeping the calc() and margin spacing untouched.

Minify with comments and nesting

/* Card */
.card {
  padding: 16px;
  & .title { font-weight: 600; }
}

Switch to Minify to strip the comment and whitespace; the status bar reports the before/after byte size.

Media query cleanup

@media (max-width: 600px) {
  .card   {
    padding:8px;
  }
}

Formats inconsistent indentation and stray spaces inside a media query into a consistent block.

Frequently asked questions

Does minifying CSS change how my page renders?

No. Minification only removes comments and insignificant whitespace — it never reorders declarations or alters specificity, so the cascade and source order stay identical and the page looks exactly the same.

Are the spaces inside calc() and multi-value properties preserved?

Yes. Those spaces are significant: calc(100% - 32px) needs them around the operator, and margin: 0 auto uses one to separate values. The minifier only strips whitespace around structural tokens like { } : ; , so both are kept intact.

Should I still minify if my server uses gzip or brotli?

gzip and brotli already remove most repeated whitespace on the wire, so the transferred saving is small. Minifying mainly helps the uncompressed parse size and inlined critical CSS in your HTML head.

Does it expand or collapse shorthand like margin?

No. Converting margin: 0 auto to four margin-* longhands (or folding them back) is a separate transformation with its own edge cases. This tool leaves shorthand exactly as written.

Is my CSS sent to a server?

No. Both beautify and minify run in your browser on the text you paste, so proprietary or unreleased styles never leave your machine.

How to use CSS Beautifier & Minifier