CSS Beautifier

Beautify and format minified CSS online with clean indentation — free CSS formatter.

About

About the CSS Beautifier

Paste minified or inconsistently formatted CSS and get it back readable, with one selector or declaration per line — which makes it much easier to spot duplicate or overridden rules by eye than a single compressed line ever would.

Minified CSS packs every rule onto one line, like .btn{color:#fff;padding:8px 16px}. Beautifying gives each selector its own block and each declaration its own line, which makes it much easier to find the rule you want, spot a property that's set twice, or copy one block into another stylesheet.

Choose what to view about this tool

Guide

Using the CSS Beautifier

  1. 1

    Step 1

    CSS is already selected below as the language.

  2. 2

    Step 2

    Paste your CSS code into the input box.

  3. 3

    Step 3

    Click Beautify to see the formatted output, entirely in your browser.

  4. 4

    Step 4

    Copy the formatted code back into your editor.

  • Expands minified CSS into one declaration per line
  • Formats media queries and nested blocks with clear indentation
  • Keeps any comments that are still in the stylesheet
  • Indent size from 1 to 8 spaces (2 by default)
  • Copy the formatted code in one click
  • Runs in your browser — free, no sign-up, and your code is never uploaded

Front-end developers

Developers read minified framework or theme CSS to find the rule to override.

WordPress users

Site owners tidy a theme's stylesheet before customising it.

Designers

Designers make sense of styles copied out of browser dev tools.

Students

Students study how real-world stylesheets are organised.

Beautify another language

JavaScript Beautifier HTML Beautifier

Examples

CSS Beautifier examples

4 worked examples

01

Minified selector block

Beautifying .card{color:#111;padding:8px 12px;border-radius:6px} puts each declaration on its own line inside the .card rule.

02

Multiple rules on one line

Beautifying a{color:blue}b{color:red} splits it into two separate blocks, one for a and one for b.

03

Nested media query

Beautifying @media(max-width:600px){.card{padding:4px}} indents the .card rule inside the media query to reflect its nesting.

04

An indent of 4

.a{color:red} becomes .a { on one line, color: red indented four spaces on the next, and a closing brace on the third.

Related tools

Syntax Highlighter

Turn a code snippet into highlighted HTML you can paste into a blog post or page.

Use it

Regex Cheat Sheet

A searchable quick reference for common regular expression syntax.

Use it

SQL Formatter

Break a SQL query onto multiple lines at major keywords for easier reading.

Use it

JSON to TypeScript Interface Generator

Infer a TypeScript interface from a sample JSON object.

Use it

cURL Command Builder

Build a cURL command from a method, URL, headers and body.

Use it

JWT Encoder

Build and sign a JSON Web Token from a header, payload and secret.

Use it

FAQ

Frequently asked questions

Quick answers to common questions about the CSS Beautifier.

How do I beautify CSS?

Paste your CSS code above, make sure CSS is selected, then click Beautify. The formatted output appears in the box below it — everything runs in your browser, using js-beautify.

Is this CSS beautifier free?

Yes. It's free, with no sign-up and no limit on how much code you format.

Can it un-minify CSS that's all on one line?

Yes — that's one of its most common uses. Paste minified CSS in and it comes back with one selector or declaration per line and proper indentation restored.

Will beautifying change how my styles look?

No — it only changes whitespace and line breaks; the actual selectors and declarations, and how they render, stay exactly the same.

Is my CSS uploaded anywhere?

No. Formatting runs entirely in your browser after js-beautify loads from this site — your code never leaves your device.

Can I beautify JavaScript or HTML here too?

Yes — switch the language dropdown, or use the dedicated JavaScript beautifier or HTML beautifier page.

Can I change how far rules are indented?

Yes. The Indent size box accepts 1 to 8 spaces; it starts at 2, and many teams use 4.

Does it sort or merge properties?

No. It only adds line breaks and indentation — property order and values stay exactly as you wrote them. Use the CSS Minifier if you want duplicate rules merged.

Are comments kept?

Yes. Comments stay in the output on their own lines, so notes in your stylesheet survive formatting.

Still have a question? Contact us

Report a problem

CSS Beautifier

What went wrong?
    or paste a screenshot