CSS Beautifier

Format and beautify CSS code for better readability

Code Tools

Tip: Paste your minified or messy CSS code and click Beautify to format it with proper indentation and line breaks.

Runs in your browser

Input CSS Code

Turn one-line CSS into readable rules

Paste a stylesheet or open a .css file and press Beautify Code. The CSS beautifier puts every declaration on its own line, indents it by 2 spaces and leaves a blank line between rules. A selector list gets one selector per line.

Use it as a CSS formatter for a minified file from a build, or for hand-written CSS that has lost its shape. Formatting is done by js-beautify 1.14.11, and it changes whitespace only: properties, values, comments and the order of rules stay as you wrote them.

CSS formatter example

A minified card component, run through the tool:

card.min.css

/* Card */.card{padding:16px;border:1px solid #ddd}.card>h3,.card .title{margin:0 0 8px;font:600 18px/1.3 "Inter",sans-serif}@media (max-width:600px){.card{padding:12px}}

card.css

/* Card */
.card {
  padding: 16px;
  border: 1px solid #ddd
}

.card > h3,
.card .title {
  margin: 0 0 8px;
  font: 600 18px/1.3 "Inter", sans-serif
}

@media (max-width:600px) {
  .card {
    padding: 12px
  }
}

The comment stayed, .card>h3 became .card > h3, and the two selectors of the second rule went onto separate lines. The last declaration of each rule still has no semicolon, because the input had none there.

What the beautifier changes and keeps

Changed

A line break after { and after every ;, and before }
2 spaces of indent per level, so rules inside @media sit one level deeper
One blank line between rules; longer runs of blank lines shrink to one
A space after the colon of each declaration and around the combinators >, + and ~

Kept as written

Comments, where you put them
Strings and url() values, data URIs included
Media query conditions such as (max-width:600px)
A missing last semicolon, and the order of rules and declarations

If the formatted CSS looks wrong

You see
Rules nested inside a rule they don't belong to

Why
A ; or } is missing just before them. The beautifier doesn't validate CSS, so the indentation shows where the braces stop matching.
You see
Missing semicolons

Why
The last semicolon in a rule is optional in CSS, so a minified file usually has none. The beautifier doesn't add it; your editor or a linter can.

Need it small again?

The CSS minifier removes the whitespace and comments again and shows how many bytes it saved.

CSS beautifier questions

Yes. Nesting, &:hover, $variables and @include blocks are indented like nested rules.

No. Declarations stay in your order, and invalid CSS is formatted without a warning. A linter such as Stylelint finds the errors.

The HTML beautifier indents <style> blocks but leaves the CSS inside them on its lines. Copy the CSS here to format it.

No. A minifier deletes comments, and formatting only restores line breaks and indentation. Keep the source file if you need them.

No. Formatting runs in your browser.