How do I format minified CSS so it is readable?

Paste the minified CSS into the input box with Beautify selected and choose Indent of 2 or 4 spaces. Selectors and declarations are put on separate lines. Then press Copy or Download to get a .css file.

Can it sort CSS properties alphabetically?

Yes. Tick Sort properties alphabetically and the declarations in each block are sorted by property name. It only reorders within a block, which can change the result if you rely on later declarations overriding earlier ones.

How do I minify CSS with this tool?

Select Minify instead of Beautify. Whitespace and comments are removed, and a size comparison shows how much smaller the output is. Download saves it as minified.css.

Does it handle @media rules, nesting and url() values?

Yes. The parser tracks quotes and parentheses, so semicolons or braces inside url() or strings do not split declarations. Nested blocks such as @media, @supports and native CSS nesting are indented at deeper levels.

Is my stylesheet uploaded anywhere?

No. The parser is written into the page and formats your CSS in the browser as you type. Nothing is sent to a server, and no third-party formatting library is used.

Yes. Every tool is free to use, with no account and no credit card. The work runs on your device rather than on our servers, which is what keeps it free to run.

Does it work on mobile?

Yes. It runs in current mobile browsers on iOS and Android, with nothing to install.

🎨

Free CSS Beautifier

Pretty-print minified CSS with consistent indentation, or minify it. Optional alphabetical property sorting for predictable diffs.

Runs in your browserNo sign-up, no pop-upsNo login requiredFree forever

Works offline once loaded

Indent:

Sort properties alphabetically

Drop a file here, or click to browse

CSS · processed on your device

or press Ctrl+V to paste from your clipboard

Browse files

Minified / messy CSS

Beautified CSS

Output will appear here…

Common uses

Debug Production CSSView minified CSS from production sites in a readable format to find and reverse-engineer styling.
Enforce Team CSS StyleRun team-submitted CSS through a consistent beautifier so diffs are about content, not formatting.
Format Vendor-Prefixed CSSVendor-prefixed CSS (autoprefixer output) often has lots of -webkit-, -moz-, -ms- variants. Format to inspect.
Learn from Pro CSSStudy CSS from famous design systems by formatting their compiled output.
Format CSS for Bug ReportsWhen filing CSS bugs, formatted CSS is much easier for reviewers to read and understand.

How It Works

This tool formats CSS using a hand-written recursive parser built directly into the page — no third-party library, no server call. The parser walks your CSS character by character, correctly handling quoted strings, url() values, nested at-rules, and comments that would confuse simpler regex-based approaches.

1
Character-level tokenization
The walkCss function scans the raw input one character at a time, tracking quote state and parenthesis depth so that semicolons or braces inside url(), string values, or comments are never mistaken for structural delimiters.
2
Block and declaration separation
When the scanner finds a top-level opening brace, it extracts the prelude (the selector or at-rule keyword) and recursively processes the block body — which itself may contain nested rules (@media, @supports, native CSS nesting) handled at a deeper recursion depth.
3
Property sorting and indentation
Declarations within each block are collected into a run, then optionally sorted alphabetically by property name before being written out with the chosen indent width (2 or 4 spaces). Minify mode skips whitespace entirely and strips comments.
4
Instant in-browser output
Results appear as you type via a useMemo hook — nothing is sent anywhere. The formatted or minified CSS can be copied to the clipboard or downloaded as a .css file, and the panel shows the size difference compared to the original.