CSS Formatter
The CSS formatter puts each declaration on its own line, indents nested at-rules such as media queries, and normalises spacing around colons, braces and commas. Comments and vendor prefixes are preserved.
CSS
Formatted CSS
Your result will appear here.
Not sure where to start? Use Load example.
Results update automatically and are calculated on your device. Nothing you type is sent to a server.
Runs in your browser. Processing happens entirely in your browser. Nothing you enter is sent to Delimiter.live.
How to use the CSS Formatter
- Paste minified or messy CSS.
- Pick an indent width.
- Copy or download the formatted stylesheet.
Example
Input
a{color:red;text-decoration:none}
Output
a {
color: red;
text-decoration: none;
}
Common use cases
- Reading a production stylesheet to find where a rule is defined.
- Tidying CSS copied out of a browser inspector.
- Reviewing a third-party stylesheet before adapting it.
Limitations and things to watch for
- The formatter works on CSS syntax, so preprocessor files using Sass or Less nesting will format as plain CSS and may not look the way your preprocessor expects.
- Comments are preserved and placed on their own line; their internal formatting is left alone.
- Declaration order is never changed, because CSS ordering affects the cascade.
Frequently asked questions
Can it unminify a production stylesheet?
Yes. That is the main use — paste a minified file and every rule and declaration is put back on its own line so you can read it.
Does it work with Sass or Less?
Partially. Files that are close to plain CSS format correctly, but preprocessor-specific syntax such as mixins and nested selectors is not understood and is passed through as written.
Will it reorder my declarations?
No. Order matters in CSS, so declarations and rules stay exactly where they were.