CSS Formatter
Re-indent CSS so each declaration sits on its own line and nested at-rules are indented, without touching strings, comments, or values inside url().
How to use
- Paste CSS into the input.
- Set the indent width, and turn on lowercasing to normalise property names.
- Copy the formatted stylesheet.
A CSS formatter splits declaration blocks onto separate lines and indents nested at-rules. Strings, comments, and url() values are tokenised first, so their contents are never reflowed.
Output
Paste or type something above.
Questions about css formatter
- Does it break strings or data URIs?
- No. Quotes, comments, and url() values are read as tokens, so their contents are copied through untouched.
- What does lowercasing change?
- Property names and hex colour digits are lowercased. String values and comments are never modified.
- Will it reformat inside a media query?
- Yes. The nested block is indented one level deeper, and its closing brace goes on its own line.
Related tools
- CSS Minifier Remove comments and redundant whitespace from CSS to shrink the file, keeping strings and...
- HTML Formatter Re-indent HTML with consistent indentation and one tag per line, while keeping script, sty...
- JavaScript Formatter Re-indent JavaScript with consistent braces and line breaks, using a tokenizer that keeps...