Skip to content
TinySolve

CSS Formatter

Expand minified CSS back into readable rules.

Runs in your browser — nothing you type is sent anywhere

Indentation

Formatted

The result appears here as you type. Nothing is sent anywhere — the work happens in this page.

SCSS and Less syntax is understood as well as plain CSS. Declarations keep the order you wrote them in — reordering them could change which rule wins.

About the CSS Formatter

Minified CSS has had every space and line break removed, which is right for shipping and impossible to read. This puts them back: one declaration per line, properly nested rules, consistent spacing around colons and braces.

SCSS and Less are understood as well as plain CSS, including nesting, variables and mixins, so the same tool works whether you are looking at source or output.

Declaration order is left exactly as written, and that is deliberate. In CSS the last matching rule wins, so reordering declarations — even alphabetically, which some formatters offer — can change which value applies. A formatter that quietly altered the cascade would be a bug factory.

What it cannot do is reverse everything minification did. Minifiers also shorten colours, merge shorthand properties and drop the last semicolon; the formatting comes back, the original spellings do not. The rules are identical in effect, which is what matters for reading them.

The parser loads in your browser only when you press the button, so nothing is uploaded.

How to use the CSS Formatter

  1. Paste your CSS

    Plain CSS, SCSS or Less. A single rule or an entire stylesheet.

  2. Choose the indentation

    Two spaces, four spaces or tabs, to match the rest of your project.

  3. Format it

    Rules are nested properly and spacing is made consistent throughout.

  4. Copy or download

    Take it to the clipboard or save it as a .css file.

Frequently asked questions

Does it sort the declarations?
No, and that is deliberate. The last matching declaration wins in CSS, so reordering them can change which value applies. Formatting should never alter behaviour.
Does SCSS work?
Yes, along with Less. Nesting, variables and mixins are all understood, so the same tool handles your source and your compiled output.
Can it fully undo minification?
It restores the formatting, not the original text. A minifier also shortens colours, merges shorthands and drops semicolons, and those changes are not reversible. The rules behave identically, which is what matters for reading them.
What happens to my comments?
They are kept and reindented with the code around them. Minified CSS usually has none left, since minifiers strip them.
Is my CSS uploaded?
No. The formatter runs in your browser and only downloads when you press the button.

You may also need

HTML Formatter

Indent minified or messy HTML into something readable.

Developer Tools

JavaScript Formatter

Make minified or badly formatted JavaScript readable again.

Developer Tools

JSON Formatter

Format, validate and minify JSON — with the exact line and column of any error.

Developer Tools

Color Picker

Pull the exact colour out of any image — as HEX, RGB or HSL, ready to paste.

Image Tools