CSS minifier

Client-side only. Minify runs in this tab. Nothing is uploaded or saved.

Beautify indent

CSS input

Result

Tip: Ctrl/Cmd+Enter minifies. Load the sample first if you want a before/after feel.

When to minify vs keep readable CSS

Minify when bytes matter for a paste: inline <style> in a page you control, a newsletter CSS block, or a quick check of how much whitespace a hand-written sheet carries. Keep a readable copy (or Beautify) when you are reviewing selectors in a PR, teaching, or hunting a cascade bug. For production apps, your bundler or a dedicated compressor with a real parser is still the better long-term path. This page is the fast local pass.

Safe rules of thumb this tool follows

Step	What happens
Protect strings	Quoted values and `url(...)` chunks are held aside so spaces inside `content` or paths are not crushed.
Strip comments	`/* ... */` comments are removed. Nested or unclosed comments can leave leftovers; fix those first.
Collapse whitespace	Runs of spaces, tabs, and newlines become a single space, then unnecessary spaces around `{}`, `:`, `;`, and `,` are tightened where safe.
Beautify path	Beautify starts from a minified pass, then re-indents rules and at-rules so humans can scan again.

Before and after (worked example)

Before	After Minify
`/* card */ .card { color: #222; margin: 0 0 1rem; background: url("bg.png"); } .card h2 { font-size: 1.25rem; }`	`.card{color:#222;margin:0 0 1rem;background:url("bg.png")}.card h2{font-size:1.25rem}`

Comment gone, braces tight, the quoted URL kept intact. That is the usual outcome for ordinary stylesheets.

What can still break

Incomplete or truncated CSS (missing braces) can minify into something that looks shorter but still fails to parse in the browser.
Legacy IE hacks, empty property values, or comments used as syntax glue are outside the safe set.
Very unusual whitespace inside modern functions is usually fine, but always re-check visual output after a large minify.
This is not cssnano, Lightning CSS, or CleanCSS. It will not rewrite colors, merge rules, or drop unused selectors.

Quick DevTools check

Minify here, then copy the result.
In Chrome or Firefox DevTools, open Elements and find a matching node, or paste into a temporary <style> on a local HTML file.
Confirm layout and computed styles still match your readable sheet.
If something looks off, Beautify the same input, diff against your original, and fix the source before minifying again.

Pair with the HTML formatter when the next paste is markup, or the SQL formatter when you are cleaning a query instead of styles.

FAQ

Does my CSS leave the browser?

No. Minify and beautify run entirely in this tab with JavaScript. ToolPetal has no upload API for your stylesheets.

Is this a full CSS parser?

No. It uses a practical string pass: protect quoted strings and urls, strip comments, collapse whitespace, and tighten spaces around common separators. It is not a CSS AST or PostCSS pipeline.

Will minify break calc() or custom properties?

Ordinary calc(), var(), and custom properties usually survive because strings and most operators stay intact. Exotic hacks, incomplete rules, or comments that hide tokens can still surprise you. Spot-check in DevTools after paste.

When should I beautify instead of minify?

Beautify when a human will read or edit the sheet (reviews, debugging, learning). Minify when you want a smaller paste for inline style tags, email shells, or quick size checks. Prefer your bundler for production builds.

Can I download the result as a .css file?

Yes. Use Download .css after Minify or Beautify. The file is built in your browser from the result textarea.