Utilore

CSS Formatter

Paste a stylesheet — even one that arrived as a single line — and read it again. Each declaration gets its own line, nested blocks get their indentation, and comments stay where they belong.

The code never leaves this page: formatting happens in your browser.

How to use

  1. Paste the CSS into the first box.
  2. Pick the indent: two spaces, four, or a tab.
  3. Copy the result, or press «Minify» to compress it again.

Good to know

Why a naive formatter breaks stylesheets

Splitting on every semicolon and brace looks like it works until the file contains content: "a;b" or a data URI with an SVG inside url(). Both are ordinary in real CSS. This formatter reads the file character by character, so quoted strings and comments are carried across whole rather than chopped at the first punctuation mark.

Nesting that actually helps

Media queries, supports blocks and modern nested rules add a level of depth each, and the indentation follows. A blank line separates top-level rules so that a two-thousand-line stylesheet reads as a list of blocks instead of a wall of text.

Frequently asked questions

Are my comments preserved?

Yes. A comment on its own goes on its own line; a comment after a declaration stays with it.

Does it change my CSS?

No properties are renamed, reordered or dropped. Only whitespace moves — the stylesheet behaves exactly as before.

Is my code sent to a server?

No. Everything runs in your browser, so a stylesheet from a project under NDA stays on your machine.

What about SCSS or LESS?

Nested rules and comments format fine. Variables, mixins and control directives pass through unchanged rather than being understood.

Related tools