CSS Formatter

Format CSS with consistent indentation.

How to use

Four quick steps — paste, run, review, copy. Everything stays in your browser.

Paste your input

Paste your input

Drop CSS, HTML, JSON, or other text into the editor. Nothing is uploaded.

Run the tool

Run the tool

Click Convert or Run. The result appears instantly on this page.

Check the output

Check the output

Read the generated code and any review notes before you ship it.

Copy and use

Copy and use

Copy the output to your clipboard and paste it into your project.

About this tool

Turn compressed or messy CSS into indented rules so reviews and diffs are readable. Formatting does not change cascade — only whitespace and structure.

Example

Example starts as a minified card snippet — Format restores indentation.

Input

.card{display:flex;padding:1.5rem;border-radius:.5rem;background:#fff}.card h2{font-size:1.25rem;font-weight:600;margin:0 0 .5rem}

Output

.card {
  display: flex;
  padding: 1.5rem;
  border-radius: 0.5rem;
  background: #fff;
}

Tip

Format before code review; minify only for production bundles.