CSS Formatter

Runs in browser Formatting

Expand minified CSS into readable rules, handling media queries, nested at-rules, comments and custom properties.

Privacy: This tool runs entirely in your browser. Your input never leaves your device.

What does a formatter or minifier change in code?

A formatter changes layout — whitespace, line breaks and indentation — so that HTML, CSS or JavaScript reads consistently, and some also normalise details the language treats as equivalent, such as HTML tag-name case or attribute quotes; a minifier removes what the browser does not need — comments, whitespace, optional semicolons — and may rewrite values into shorter equivalents such as #fff for #ffffff. Neither is meant to change what the code does, but review the diff before you commit it: an option that reorders code, such as sorting CSS properties, can change which declaration wins, and a lower-cased tag name breaks a case-sensitive framework component such as <MyComponent>.

How to use CSS Formatter

  1. Paste minified or messy CSS.
  2. Pick indentation and whether to sort properties.
  3. 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: a space after the at-rule name, after the colon of a feature such as (max-width: 600px), and after commas.

What does "Sort properties" do?

It orders the declarations inside each rule alphabetically by property name. Custom properties (--name) are sorted with the rest, and repeated declarations of one property (fallbacks) keep their original order. Sorting can change the result when a rule sets overlapping properties: in padding-left: 5px; padding: 0 the later padding wins, but sorted it comes first and the left padding becomes 5px. Check such rules, or turn the option 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.

References