Skip to content
codevory

CSS Formatter

Beautify CSS with one declaration per line and consistent indentation. Media queries, nesting, custom properties and data URLs are handled.

CSS Formatter: the tool

Paste CSS to format it.

Input

Formatted CSS

The result appears here.

How to use CSS Formatter

  1. Paste CSS, including minified CSS, or press Example.
  2. Choose 2 spaces, 4 spaces or tabs, and whether to leave a blank line between top-level rules.
  3. Each selector of a list goes on its own line, and each declaration on its own line with a space after the colon.
  4. If the CSS has an unclosed brace, string, comment or parenthesis, the error shows where it starts. Copy the result or download it.

Example

A minified button stylesheet, expanded with 2 spaces.

Input
/* Buttons */.btn{display:inline-block;padding:.5rem 1rem;color:#fff;background:#3b35a8;border:0}.btn:hover,.btn:focus{background:#2a2566}@media (max-width:600px){.btn{display:block;width:calc(100% - 2rem)}}
Output
/* Buttons */
.btn {
  display: inline-block;
  padding: .5rem 1rem;
  color: #fff;
  background: #3b35a8;
  border: 0;
}

.btn:hover,
.btn:focus {
  background: #2a2566;
}

@media (max-width: 600px) {
  .btn {
    display: block;
    width: calc(100% - 2rem);
  }
}

About this tool

The formatter reads the stylesheet as rules, at-rules and declarations, so it never confuses a ; inside a string or a data: URL for the end of a declaration, and it does not split content inside parentheses. Nested rules, as written in modern CSS with & or inside @media and @supports, are indented one level per block. Custom properties (--name) keep their value exactly.

It changes layout only. It does not reorder properties, merge rules, rename anything or fix invalid declarations: a declaration it cannot understand, such as a hack like *zoom: 1, is kept as written. Comments stay where they were. Formatting the output again gives the same output.

Selectors are tidied without changing their meaning. The space in a :hover (descendant of any element that is hovered) is not the same as a:hover, and the formatter keeps that difference. Combinators (>, +, ~) are written with one space on each side.

Frequently asked questions

Does formatting change how the page looks?

No. Only whitespace changes. Values, selectors, the order of rules and comments are all kept, and the spacing inside calc() and strings is preserved.

Does it work with nested CSS and Sass?

It handles native CSS nesting and at-rules such as @media, @supports, @layer and @container. Sass and Less features that are not CSS, such as $variables, @mixin or // comments, are not CSS and may be reported as errors or left as they are.

Why does it keep a declaration that looks wrong?

It formats, and does not validate. Old browser hacks and typos are kept as written so that nothing you wrote is silently removed. Use a linter to find them.

Can it format a minified file?

Yes, that is the typical use. Minified CSS has the same meaning as the formatted version, so formatting it makes it readable again. Comments that the minifier removed cannot come back.

Is my CSS uploaded?

No. It is formatted in your browser.

More developer tools