Entrovix AI

CSS Formatter and Minifier

Formats CSS with at-rules and nesting indented the way they actually nest, and minifies it while reporting exactly how many bytes that removed.

Runs in your browser — nothing is uploaded

Your CSS
0 lines0 characters0 B

Where the formatter prefers to wrap.

Ctrl + Enter formatCtrl + Shift + K clear

Your code is processed locally in your browser. Nothing you paste is uploaded, logged or sent to a server or an AI model.

Result

Your formatted CSS appears here

Along with a diff of exactly what changed.

Why use it

Built to be genuinely useful

At-rules handled properly

@media, @supports, @layer and @keyframes indent as real blocks, while @import and @charset stay on one line.

Minify with a byte count

The result panel reports the size of the output alongside the size of what you pasted.

Comments preserved

Formatting leaves every /* */ note exactly where you wrote it, including licence headers.

Nothing is uploaded

The whole thing runs in your browser, so unreleased CSS never leaves your machine.

How it works

Three steps

  1. 1

    Paste your stylesheet, or just the block of it you are trying to read.

  2. 2

    Press “Format” for readable output, or “Minify” to strip it down.

  3. 3

    Check the byte saving, then copy the result.

Why at-rules trip up most formatters

Most quick formatters split on braces and indent by counting them. That works until an at-rule appears. @media, @supports, @layer and @container open a block that contains whole rules, so their contents belong one level deeper. @import, @charset and @namespace open nothing at all — they end in a semicolon, and a tool expecting a block after every @ will mangle them.

@keyframes is the awkward one, because its children are percentages rather than selectors — 0%, 50%, to — and each opens its own block. Native CSS nesting adds another layer, where a rule inside a rule uses & and has to keep its parent's indentation. This tool tracks brace depth and the kind of at-rule it is inside, so all of these land where they should.

The failure is easy to miss, because broken indentation is still valid CSS and the browser does not care. You care, because a media query indented at the top level looks like a rule that applies everywhere, and that is exactly the sort of misreading that costs an hour.

What minifying actually saves

Minifying strips comments, line breaks, indentation, the final semicolon in each block and the spaces around colons and braces. On a hand-written stylesheet that is typically 20 to 30 per cent of the file. A 48 KB stylesheet coming down to 34 KB means 14,336 bytes gone, and the tool shows you that figure rather than leaving you to guess.

Be sceptical about what the saving buys you. Whitespace and repeated property names compress extremely well, so once gzip or brotli is on — and it is on for almost all production traffic — 14 KB of removed whitespace might be worth one or two kilobytes over the wire. Turn compression on first, minify second.

The number is still worth having. It tells you whether a stylesheet is mostly rules or mostly formatting, and a saving far above 30 per cent usually means there is dead code or a duplicated block in there. Minifying is a measurement as much as an optimisation, which is why the byte count is shown and not hidden.

Comments, and what is left alone

Formatting keeps every comment exactly where it was. That sounds obvious until you use a formatter that treats /* */ as whitespace and quietly deletes the note explaining why a z-index is 9999. Comments are the part of a stylesheet that cannot be reconstructed from the rules, so they survive formatting untouched.

Minifying does remove them, because that is the point — but it is a choice you make by pressing “Minify”, not something done behind your back. Keep the commented copy as your source and treat the minified output as a build artefact; editing minified CSS by hand is how comments get lost permanently.

Nothing else is rewritten. Selectors, property order, colour notation and units come out as you wrote them: #ffffff stays #ffffff, and 0px stays 0px. Rewriting those is what a build-time optimiser does, and it needs to know your browser targets to do it safely. A formatter that guesses is a formatter that breaks something.

FAQ

Questions people ask

API access

Need CSS Formatter and Minification in Your Application?

Integrate CSS formatter and minification directly into your application, backend or build pipeline through API access.

Tell us what you are building, how you plan to use it and the volume you expect. We will come back to you with availability, integration details and a quote for your usage.

Need a tool like this for your business?

We build internal tools, dashboards and automation that fit how your team works.

See Our Services