CSS Formatter

How it works

Open the stylesheet of almost any live site and you get a .min.css file squeezed onto one line: 40 KB of rules with no visible start or end. Paste it into the left panel and the right panel shows every selector on its own line, every property (color: red;) on a separate line, and the inside of each block indented to the width you picked. @media, @supports and @keyframes blocks go one level deeper, so you can see at a glance where the mobile rules split from the desktop ones. Comma-separated selectors (.card h2, .card h3) are stacked, and comments stay where they were. Nested rules from an SCSS or LESS file are unpacked the same way; variables such as $brand or @brand are left alone. The result line tells you how many lines became how many and how many rule blocks were found. Set What should happen? to Minified and the tool goes the other way: whitespace and comments are dropped, colours like #ffffff are shortened and the code lands on one line. Rules are not merged and their order does not change.

This tool is also known as css formatter, css beautifier, css prettify, format css online, scss formatter, less beautifier.

What is CSS?

CSS (Cascading Style Sheets) is the language that sets a web page's colours, fonts, spacing and layout. Each rule is a selector (.card, h2, #menu) followed by property: value; pairs inside curly braces. Browsers ignore the spaces and line breaks between rules, which is why the same stylesheet can be written with neat indentation or crushed onto one line and still style the page identically.

What is SCSS and LESS?

SCSS and LESS are preprocessor languages that add variables, nested rules and reusable blocks (mixins) on top of CSS. Browsers cannot read them directly; a compiler turns them into plain CSS first. Their syntax is close enough to CSS that the same formatter can indent them: a nested .card { h2 { ... } } structure gets one more level of indentation per step.

What is the difference between formatting and minifying CSS?

They push the same code in opposite directions. Formatting (beautifying) adds spaces and line breaks so a person can read the code; the file grows but its meaning stays the same. Minifying strips whitespace and comments, shortens colours and numbers and, in deep mode, merges rules; the file shrinks and loads faster but becomes hard to read. The browser gets the same result from both; the difference is who has to read the file.

Does formatting change the CSS?

No. In indented mode only spaces, line breaks and indentation change; selectors, properties, values and comments stay character for character the same. Browsers ignore whitespace in CSS, so the formatted file renders the page exactly as before. That makes it safe for reading a live site's minified stylesheet, hunting a bug or copying one rule out of it.

The tool is not a validator. A missing closing brace, a misspelled property or a missing semicolon is not reported; the code is simply indented as it is. The layout still gives errors away: after an unclosed block, every rule below sits one level too deep.

Indented or minified?

Indented CSS is for people: reading, editing, sharing with a team. Minified CSS is for browsers: the smaller the file on a live site, the sooner the page can paint. The usual workflow is to keep the indented file in your project and minify on the way to production.

The Minified option on this page is the safe kind: only whitespace and comments go, colours and numbers are shortened, and the number and order of rules stay the same. /*! licence comments are kept. For deeper minification that merges rules, with a before-and-after byte count, use the CSS minifier.

• Reading, debugging, copying a rule → Indented
• Shipping to production, embedding in an email → Minified
• SCSS/LESS source files → Indented (minify the compiled CSS)

Frequently asked questions

How do I make minified CSS readable?

Copy the contents of the file and paste them into the left panel on this page. Every selector and property gets its own line and each block is indented. Copy the result or download it as a .css file. To grab a live site's stylesheet, open the Sources tab in your browser's developer tools and copy the .css file from there.

Can I format SCSS or LESS?

Yes. Nested rules, variables and & selectors are unpacked and indented the same way. The tool does not compile SCSS or run mixins (@mixin, @include); it only makes the layout readable.

Will it tell me if my CSS has errors?

No, this is not a validator; broken code is indented as it is. An unclosed brace usually shows up as rules sitting one level too deep. The CSS minifier on this site does warn you about the line and column of unreadable parts.

Is my code sent to a server?

No. Formatting runs entirely inside your browser; the code you paste never leaves this page and is not stored anywhere.