What is the difference between beautifying and minifying CSS?

Beautifying expands CSS onto multiple indented lines so it is easy to read and edit — ideal during development. Minifying does the opposite: it strips whitespace, newlines and optional characters so the file is as small as possible, which speeds up page loads in production. This tool does both from the same input.

Will sorting properties change how my CSS behaves?

No. Sorting only reorders declarations alphabetically within a single rule block, and the cascade inside one block depends on specificity and the last value for a given property — not declaration order — so identical properties are not affected. Comments and nested rules stay anchored where you put them. It purely makes diffs and code reviews tidier.

Does the minifier shorten hex colour codes?

Yes, when the lowercase-and-shorten-hex option is on. It lowercases hex values and collapses six-digit codes like #AABBCC into the three-digit form #abc whenever each pair of characters repeats, which is a safe, lossless shortening that every browser understands.

Can it handle media queries, keyframes and nested at-rules?

Yes. The formatter parses the full block structure, so @media, @supports and @keyframes blocks are indented and minified correctly along with the rules nested inside them. Statement at-rules such as @import and @charset are preserved on their own line.

Is my CSS uploaded to a server?

Never. The entire parser, beautifier and minifier run in JavaScript inside your browser tab. Nothing is sent over the network, so it is safe to paste proprietary or unreleased stylesheets.

What does the size saving figure mean?

It compares the raw byte size of your input against the formatted output, in bytes or kilobytes, with a percentage. When you minify, this shows roughly how much smaller the shipped file is; remember real-world transfer also benefits from gzip or brotli compression on top of minification.

CSS Formatter & Minifier

A fast, private CSS formatter and minifier that runs entirely in your browser. Paste a stylesheet — however messy — and get back clean, consistently indented CSS, or flip a switch and minify it down to the smallest size for production. It is built for front-end developers tidying a hand-edited stylesheet, reviewers who want a predictable diff, and anyone who has inherited a single-line blob of CSS and needs to actually read it.

How it works

Under the hood the tool runs a small CSS tokenizer rather than a naive find-and-replace. It walks the source character by character, correctly tracking comments, single- and double-quoted strings, and nested parentheses and brackets, so it never splits a declaration in the wrong place — for example inside a url(...) value or a calc() expression. The parser builds a tree of rules (a selector list plus a block) and declarations (a property and a value), and that tree is what gets printed.

When you beautify, each rule opens a brace on its own line, declarations are indented with your chosen unit (2 spaces, 4 spaces or tabs), values are normalised so there is exactly one space after each comma, and optional blank lines separate top-level rules. When you minify, the same tree is printed with no whitespace, declarations joined by semicolons, the final semicolon dropped, and spaces around colons, commas and braces removed. Two extra options work in both modes: sort properties reorders declarations alphabetically within each block (comments and nested rules stay put), and lowercase + shorten hex rewrites #FFAABB style colours to their shortest safe form.

Everything recalculates instantly as you type, the byte-size saving is shown live, and your input plus your options are remembered in this browser so the page is ready next time.

Example

Paste this cramped rule:

.card,.panel{padding:16px;margin:0;border:1px solid #FFAABB;color:#FFF}

Beautified with 2-space indent and hex shortening it becomes a readable block with .card, .panel on the opening line, each property on its own indented line ending in a semicolon, and the colours rewritten to #fab and #fff. Switch to Minify and the same input collapses back to a single tight line with the trailing semicolon removed — typically trimming 20-40% of the bytes from hand-written CSS before any gzip compression is applied on your server.

A @media (max-width: 600px) { ... } block is handled the same way: beautified it is indented one level deeper than its parent rules; minified it becomes @media (max-width:600px){...} with no wasted characters.

Tips

Use beautify while you are writing or reviewing CSS and commit the readable version, then run minify as a build step — or right before pasting into a <style> tag — to ship fewer bytes. Turning on sort properties before you commit makes future diffs far smaller, because changing one value no longer reshuffles surrounding lines. If something looks off, check the notes panel: the parser flags unterminated comments or mismatched braces while still doing its best to format what it could read.