CSS Formatter
Indent and format CSS rules, selectors and declarations.
- Runs locally in your browser
- No upload required
Try it
Supported formats
Privacy
Runs entirely in your browser. Your input is never uploaded, stored, or sent to a third party.
Laid out 1 line(s) of CSS at 2-space depth.
How it works
- Tokenised the stylesheet into selectors, punctuation, strings and comments.
- Put each selector/block and declaration on its own line at a depth-based indent.
- Preserved string literals, comments and url() contents exactly.
- Selectors and declarations are preserved; only whitespace changes.
- Output is 4 line(s); formatting it again changes nothing.
Methodology
- Tokenise the stylesheet respecting strings and comments so braces inside them cannot close a block.
- Emit selectors and blocks at a depth-based indent and declarations one per line.
- Re-emit strings and url() values verbatim.
Usage
- Paste or type a CSS stylesheet.
- Choose a 2- or 4-space indent.
- Run the formatter and copy the indented result.
Examples
These are examples, not current values: they use fixed inputs, while the interactive tool computes live results in your browser.
Rule and declarations
{
"text": ".a{color:#fff;background:#000}",
"indentSize": 2
}Media query
{
"text": "@media (max-width:600px){.a{display:none}}",
"indentSize": 4
}URL and string preserved
{
"text": ".a{background:url(\"a b.png\")}",
"indentSize": 2
}Limitations
Formatting versus minifying
Format a stylesheet while authoring or reviewing it; minify it for the served asset. Both tools keep the token stream identical.
Frequently asked questions
- Are my string and url() values changed?
- No. Strings and url(...) contents are tokenised as opaque text and copied exactly.
- Does it fix invalid CSS?
- No. Formatting never validates or repairs; it only changes layout whitespace.
- Is my stylesheet uploaded?
- No. The stylesheet is processed entirely in your browser.
Sources
Send feedback
Tell us if this tool helped, report a problem, or suggest a tool. Only the message you type is sent — never the input you used in the tool.
Was this tool useful?
Prefer to write to us directly? See the contact page.