CSS Minifier Formatter
Two-way CSS minifier and beautifier. Context-aware - respects calc(), data URLs, pseudo-selectors. Free, offline, client-side, instant.
Two-way CSS compressor / beautifier with a context-aware tokenizer that respects calc() spaces, url(data:...) semicolons, and :hover-style pseudo-selectors - the four things naive regex tools break.
How to Use CSS Minifier Formatter
- Pick a mode: ⚡ Minify strips whitespace, comments, and redundant semicolons; 🪄 Format rebuilds indentation from minified CSS.
- Paste CSS, or click Load Sample to see edge-case handling (calc, data URL, pseudo-classes).
- For format mode, pick 2-space or 4-space indent.
- Upload a .css file (up to 5 MB).
- Output is live - input change auto-triggers (200 ms debounce).
- Stats card shows input/output bytes, reduction (minify) or expansion (format) bytes and %.
- Copy or download
styles.min.css/styles.formatted.css.
Frequently Asked Questions
Should I keep minified or formatted CSS in my project?
Keep the formatted version in source control and treat minified output as a build artifact, generated at deploy time and never edited by hand. Editing minified files directly is how subtle bugs are born, one missed semicolon in a 200 KB single-line file is brutal to find. If you inherited a project where only the minified file survives, run it through the formatter once, commit that as the new source, and minify from there onward.
What’s a “context-aware tokenizer”?
Instead of using regex (which doesn’t understand structure), the tool walks character-by-character tracking THREE states: in-string (between quotes), in-parens (inside calc() or url()), and in-comment. Structural rewrites (collapsing whitespace, adding newlines) only happen OUTSIDE these protected contexts. This is the same approach UglifyCSS, csso, and cssnano use.
Why is calc() particularly hard?
The CSS spec requires whitespace around +, -, *, / operators inside calc(). Without spaces, calc(100%-20px) is INVALID and silently fails – the property gets ignored. Naive minifiers strip “redundant” whitespace because in normal CSS color: red and color:red mean the same thing. They have to track paren depth to know when whitespace is structural vs cosmetic.
How does format know when : means pseudo vs property?
Position. Inside a declaration block (between { and }), : is property-value separator. Inside a selector (before {), : introduces a pseudo-class. The tokenizer tracks brace depth and emits selector/declaration tokens differently. That’s why :hover in a:hover { ... } stays glued but color:red becomes color: red.
Will my comments be preserved when minifying?
No – comments are stripped by default. (See the separate css-minifier tool if you need a /*! ... */ license-preserve toggle.) Format mode also can’t restore comments because they’re already gone from the minified input.
What’s the difference between this and the css-minifier sibling tool?
The sibling tool is minify-only with aggressive options (zero-unit stripping, hex shorthand, rgb→hex, license preservation, gzipped-size estimate). This tool is bidirectional – minify AND format – but with simpler minify options. Use this when you need round-trip; use the sibling when you only need maximum compression.
Why does the formatted output not match my original perfectly?
Format isn’t a parser-faithful reverse – it’s a re-emitter. Empty lines between rules, comment positions, and original indentation (e.g. tabs vs spaces) are normalized to a consistent style. The result is functionally identical CSS, but cosmetically rebuilt.
Does this handle CSS Nesting (the new browser-native syntax)?
Yes. CSS Nesting (.btn { &:hover { color: red; } }) is just nested rule blocks – the tokenizer tracks brace depth so the & nesting selector and inner block format correctly. Browser support: Chrome 112+ (May 2023), Safari 16.5+ (June 2023), Firefox 117+ (Aug 2023) – universal by 2026.
What’s the byte savings for a typical stylesheet?
Minified output is typically 30-60% smaller than well-formatted source. Format-then-minify produces the same result as direct minify (the tool is idempotent). Real wire savings come from gzip on top of minify – typically 80-90% total reduction. Use the sibling css-minifier tool for an estimated gzip size.
Is my data secure?
Yes. CSS, file uploads, all processing stays in your browser. Nothing is uploaded.