How to use CSS Formatter
- Paste minified or messy CSS.
- Pick indentation and whether to sort properties.
- Copy the readable stylesheet.
CSS Formatter features
- One declaration per line with consistent indentation
- One selector per line for selector lists (optional)
- Nested @media, @supports, @layer and @keyframes blocks
- Normalises spacing around colons, commas, combinators and !important
- Optional alphabetical sorting of properties
- Preserves comments, strings, url() and calc() values
CSS Formatter example
Expand minified CSS
Input:
a,a:hover{color:#1266f0;text-decoration:none}@media(max-width:600px){a{display:block}}Output:
a,
a:hover {
color: #1266f0;
text-decoration: none;
}
@media (max-width: 600px) {
a {
display: block;
}
}Frequently asked questions about CSS Formatter
Are @media, @supports and nested at-rules supported?
Yes. Nested blocks are indented one level per depth, and at-rule preludes are normalised (spaces after colons and commas).
What does "Sort properties" do?
It orders the declarations inside each rule alphabetically. Custom properties (--name) are sorted with the rest. Turn it off to keep the original order.
Does it break url() or calc() values?
No. Strings, url(…) contents and calc() expressions are preserved; only surrounding whitespace is normalised.
Will it fix invalid CSS?
No. Unbalanced braces are formatted best-effort and a warning is shown, but nothing is removed or rewritten.