Skip to main content
DevCodivo

CSS Formatter

Beautify CSS stylesheets — one declaration per line, consistent indentation.

Runs in your browser — your data never leaves your deviceFree, no sign-up
Options
Formatted CSS

The formatted CSS will appear here.

How it works

Your stylesheet is processed by the CSS mode of js-beautify — the library behind most beautifier tools. Rules are split so each declaration sits on its own indented line, at-rules like @media and @keyframes indent their contents, and everything else — selectors, values, comments — passes through exactly as written.

Features

  • One declaration per line, consistent indentation
  • Media queries and at-rules indented as blocks
  • Custom properties and modern layout CSS supported
  • 2 or 4 space indentation
  • 100% client-side — nothing leaves your browser

How to use

  1. Paste CSS, or upload a .css file.
  2. Choose 2 or 4 space indentation.
  3. Press Format CSS, then copy the result or download it as a .css file.

Example

Input:  .card{border:1px solid #eee;padding:12px}
Output: .card {
          border: 1px solid #eee;
          padding: 12px
        }

Frequently asked questions

How is the CSS formatted?
Each selector goes on its own line, with every declaration on its own indented line: selector, opening brace, one declaration per line, closing brace. Media queries and nested at-rules are indented one level deeper, so their rules are visually grouped.
Does the formatter validate my CSS?
No — it is a formatter, not a validator. It re-indents and re-flows rules without checking that property names or values are real, so broken CSS may still produce output. Use it to make stylesheets readable, not to check they are correct.
Is my CSS minified or changed in any way?
No. Formatting only changes whitespace and line breaks — selectors, property names, values, units and comments all pass through exactly as you wrote them. Nothing is minified, reordered or merged.
Does it handle modern CSS?
Yes — custom properties (variables), flexbox and grid properties, media queries, keyframes and other at-rules all format correctly. The formatter works on the structure of the language, not a list of known properties.
Is my CSS sent to a server?
No. Formatting happens entirely in your browser with JavaScript. Nothing you type is transmitted anywhere — you can verify this in your browser's network inspector.

Related tools