CSS Formatter
Expand minified CSS into readable rules, or compact a stylesheet back into a single line.
Your data stays on your device
Input — CSS
- characters
- 0
- lines
- 0
- size
- 0 B
Output — Formatted CSS
- characters
- 0
- lines
- 0
- size
- 0 B
Options
About this tool
Reading a minified stylesheet means finding a selector inside one continuous line of text. Formatting it — one declaration per line, one rule per block — makes the cascade visible and lets you actually diff two versions.
Media queries, supports blocks and nested at-rules are indented as the nested structures they are, and custom properties are preserved exactly, including their values, which are not always valid CSS syntax on their own.
How to use this tool
- Paste CSS or upload a stylesheet.
- Choose beautify or compact mode.
- Set the indent width and whether to keep blank lines between rules.
- Press Format and copy or download the result.
Key features
- Beautify and compact modes
- One declaration per line with aligned values
- Media queries and at-rules indented as nested blocks
- Custom properties preserved verbatim
- Comments retained in place
- Configurable blank lines between rules
Example
Input — CSS
.card{padding:1rem;border-radius:8px}Output — CSS
.card {
padding: 1rem;
border-radius: 8px;
}Good to know
- Formatting does not validate properties; an unknown or misspelled property is passed through untouched.
- Compact mode removes whitespace only. It does not merge rules, shorten values or remove unused CSS.
- Preprocessor syntax such as Sass nesting is not understood and may be reformatted incorrectly.
Frequently asked questions
Does compacting minify properly?
It removes whitespace and comments, which is most of the benefit for a small file. A real minifier also shortens colours, merges rules and drops duplicates.
Are my comments preserved?
In beautify mode yes. Compact mode removes them, since their purpose is readability.
Can it format Sass or Less?
Not reliably. Those are different languages with nesting and variables that this formatter does not parse. Use their own tooling.
What happens to custom properties?
They are preserved exactly. Their values can be arbitrary token sequences, so reformatting them risks changing meaning.
Your data stays on your device
Your data is processed locally in your browser and is not uploaded to our server. This page keeps working after you go offline, because there is nothing to send.