press ⌘K to switch tools
FORMAT & CONVERT
CSS Formatter
Reformat minified or messy CSS into readable, indented stylesheets.
css-format
§01 ABOUT THIS TOOL
Overview
Minified or machine-generated CSS is nearly impossible to read or debug. This tool reformats any stylesheet with consistent two-space indentation, one declaration per line, using the js-beautify CSS engine. Everything runs locally in your browser.
How to use
- Paste your stylesheet into the CSS field.
- The Formatted field updates instantly as you type — no button to press.
- Copy the result from the output field.
Examples
.a{color:red;margin:0}→
.a {
color: red;
margin: 0;
}
- A single-line media query like
@media(max-width:600px){.b{padding:1em}}expands into an indented block, making breakpoint rules easy to scan.
Notes
The formatter rewrites whitespace only — it does not validate syntax, so malformed CSS is passed through on a best-effort basis rather than rejected with an error. Comments are kept in place. For very large stylesheets, formatting still happens instantly since no network round-trip is involved.
FAQ
Is my CSS sent to a server?
No. Formatting runs entirely in your browser using the js-beautify library. Your stylesheet never leaves your machine.
What indentation does the formatter use?
It applies two-space indentation and places each rule and declaration on its own line. The indent width is fixed and not configurable.
Does formatting change how the CSS behaves?
No. Only whitespace and line breaks are adjusted. Selectors, properties, values, and their order are preserved, so the rendered result is identical.