Code & Data

Format CSS without breaking your values

Paste CSS to re-indent it. Each comma-separated selector goes on its own line, declarations are indented one level per nesting depth, and everything inside a string or a url() comes through byte for byte.

or paste your own — nothing is uploaded.

Indentation

Strings and url() bodies are never touched, so a data URI or a content string survives intact.

Formatted CSS

Paste CSS above and the result appears here.

  • Runs in your browser
  • No account required
  • Free to use

How it works

01

Tokenised, not pattern-matched

The tempting way to format CSS is a few regular expressions on braces and semicolons. It breaks on the first `content: "}"`, on every `url(data:image/svg+xml;base64,...)` and on any attribute selector containing a brace — all of which are ordinary CSS. Splitting the stylesheet into tokens first means the formatter always knows whether a brace is structure or content.

02

One selector per line

The convention every CSS style guide lands on, because it makes a diff show which selector changed rather than that the selector list changed. Commas inside `:is()`, `:not()` and `:nth-child()` belong to the function and are left alone — splitting there would produce two selectors that are each invalid.

03

Only formatting changes

No property reordering, no shorthand rewriting, no colour normalising. A formatter that also edits your declarations is one you have to re-read afterwards, which defeats the point.

What it does

Two, four spaces or tabs

Whatever your project uses.

At-rules nest properly

@media, @supports and @layer bodies are indented as blocks, so a responsive stylesheet reads as the structure it is.

Comments kept, or dropped

Kept by default. One checkbox removes them if you are preparing something for publication.

Nothing leaves the page

The stylesheet is parsed in your browser and never uploaded, so unreleased design work stays on your machine.

Practical advice

Getting a better result

  • A final declaration without a semicolon is legal CSS, and it gets one added — which is the safer form when someone appends a rule later.
  • If you are chasing a rendering bug, format first. A missing brace is obvious in indented CSS and nearly invisible in minified.
  • Formatting then minifying gets you back to where you started, byte for byte, which is a quick way to confirm nothing was altered.

Questions

Things people ask

Will it change my CSS?

Only the whitespace and the line breaks. Properties keep their order, values keep their form, and colours are not rewritten. The one addition is a semicolon after a final declaration that lacked one, which is legal either way and safer with one.

Does it handle data URIs?

Yes. An unquoted url() body is taken whole, so the semicolons and slashes inside a base64 data URI are never mistaken for CSS structure — which is the commonest way a naive formatter corrupts a stylesheet.

Is my CSS uploaded?

No. It is parsed in your browser and the page makes no network requests at all.

Who builds these

Free tools by day. Websites that earn their keep by trade.

KuConvert is built by KUDUY, a web design and development agency. From custom WordPress builds to SEO and e-commerce, everything they do is engineered to bring you more qualified traffic and turn it into revenue.

  • Fixed scope, no surprise invoices

    Most sites ship in four to eight weeks with the scope and the price agreed up front.

  • SEO from day one

    Search is designed into the build — structure, schema and Core Web Vitals — not retrofitted.

  • A team, not a ticket queue

    A project manager, a designer and a developer you can actually reach.

Need your whole site to load this fast?

Images are usually the heaviest thing on a page and the easiest win. KUDUY works on site speed, image delivery and Core Web Vitals for teams who would rather not do it by hand.

This tool runs entirely in your browser. Your files are never uploaded.