CSS Formatter - Beautify & Indent

Overview

Beautify your CSS — cleanly and privately

A CSS Formatter re-lays-out messy or minified CSS so each rule sits in its own block with one declaration per line and consistent spacing around braces, colons, and semicolons. This one runs entirely in your browser — your CSS is never uploaded — and it indents nested at-rules like @media.

Minified stylesheets and hurried edits are hard to read and harder to debug. A CSS formatter fixes that: it puts each selector block on its own lines, places one declaration per line, and applies consistent spacing around braces, colons, and semicolons — turning a compressed string into a clear, scannable stylesheet.

Paste your CSS or load a local .css file, choose your indentation (2 spaces, 4 spaces or a tab), and it is re-laid-out as you type, with highlighting. Nested at-rules — @media, @supports, @keyframes — are indented to the right depth, and comments are preserved. Minify compacts it for production, and Rules lists the stylesheet's selectors as a tree with a declaration count against each, which is the fastest way to see the shape of a file you did not write.

The CSS formatter in dark mode: minified CSS in the cyan editor pane on the left with line numbers, and the magenta pane on the right showing it expanded with one declaration per line, the data URI in a url() intact on a single line, and a content value of "{ ; }" left exactly as written — A url() holding a data URI and a content value holding braces and a semicolon: both are copied through, not parsed as structure

What is inside a string stays inside it. The formatter reads the stylesheet with a real tokenizer, so content: "{ ; }" is a value rather than a block that opens and a declaration that ends, and url(data:image/png;base64,…) is one token rather than two declarations split at its first semicolon. Comments come through byte for byte, a /*! banner survives a trip through Minify, and the whitespace calc() needs around its + and - is never removed, because calc(100%+2px) is not valid CSS.

Like every tool here, it's built around privacy. All formatting happens in your browser — there's no server, no upload, no logging, and no tracking of your stylesheet. Developers regularly paste proprietary CSS or minified vendor code; here it never leaves your device, and the tool works offline once loaded.

Some honest limits. Formatting is cosmetic: it changes whitespace and layout, not which rules apply, the cascade, or specificity — your styles behave identically. It's a beautifier, not a linter or autoprefixer: it won't add vendor prefixes, remove unused rules, or flag errors. And it targets plain CSS — if you paste SCSS or LESS, preprocessor-specific syntax (nesting, variables, mixins) may not format perfectly, since those are compiled languages rather than CSS.

For the reverse, see the CSS Minifier; for markup and scripts, the HTML Formatter and JavaScript Formatter; and to convert color values, the Color Code Converter.

Use cases

When a CSS formatter helps

Unminifying. Expand a minified stylesheet into readable CSS.
Debugging. See rules clearly, one declaration per line.
Cleaning edits. Tidy inconsistent spacing after hand-editing.
Reading vendor CSS. Make third-party or DevTools CSS legible.
Sensitive stylesheets. Format proprietary CSS without uploading it.

Guide

How to format CSS

Paste or load your CSS

Type it, paste it, or open a local file (read in-browser, not uploaded).

Choose your indentation

2 spaces, 4 spaces or a tab — a style choice that shapes the formatted output and nothing else. Sort properties sits beside it and is off by default; read the FAQ answer below before you turn it on, because reordering declarations is not always safe.

Format

There is no Format button: the output is rebuilt on every keystroke. One declaration per line, one rule per block, consistent spacing around braces, colons and semicolons, and nested at-rules indented to their real depth. Each top-level rule is separated from the next by a blank line.

Review comments and at-rules

Comments are preserved byte for byte and a comment that sat between two declarations gets its own line. @media, @supports and @keyframes are indented to their real depth. Switch to Rules to see the same stylesheet as a tree of selectors instead, with the number of declarations in each.

Copy or download

Grab the formatted (or minified) output. Nothing is sent anywhere.

Realistic example

Paste body{margin:0;font:16px/1.5 sans-serif}a{color:#06c} and it expands to two tidy rule blocks, each declaration on its own line, easy to read and edit.

Advanced tip

After formatting, use the Color Code Converter if you need to switch a value between HEX, RGB, and HSL.

Common mistake to avoid

Do not expect the formatter to add vendor prefixes or fix errors — it lays out what you give it, and an unclosed brace produces a warning and formatted output rather than a refusal. Use a linter and an autoprefixer for those. The one setting that can change behaviour is Sort properties, and the FAQ below says exactly when not to use it.

Minify here does the same job as the dedicated CSS Minifier, which adds a comment policy and a side-by-side size readout. Both keep a /*! banner, both leave string contents alone, and neither removes the whitespace calc() needs.

The CSS formatter with Minify selected: the magenta pane holds the whole stylesheet compacted, with the /*! banner comment still at the top, the content string still reading "{ ; }" and calc(100% - 2rem) still carrying its spaces — Minified, with the three things that must not be touched still untouched: the banner, the string, and the spaces calc() needs

Good to know

What to keep in mind

Zero-knowledge and private. Formatting runs in your browser — nothing uploaded, logged, or tracked, and it works offline.
Cosmetic only. It changes layout, not which rules apply, the cascade, or specificity.
Not a linter or autoprefixer. It won't add prefixes, remove dead rules, or flag errors.
Preprocessor caveat. It targets plain CSS; SCSS/LESS-specific syntax may not format perfectly.
Large files run locally. Very big stylesheets are limited by your device, since there's no server.

Support

Frequently Asked Questions

The CSS formatter with Rules selected: the magenta pane lists the stylesheet selectors as indented cards — .card::before with 2 declarations, .card with 3, and a media query holding two nested rules — Rules shows the shape of a stylesheet: every selector, nested at-rules indented, and how many declarations each holds

The CSS formatter on a 390-pixel phone: the Format, Minify and Rules buttons across the top, a two-button tab strip reading Your CSS and Result, and the formatted stylesheet filling the width with syntax colouring — On a phone the two panes become a tab strip and the mode buttons take the full width

How do I beautify or format CSS?

Paste your CSS (or load a local file), choose an indentation of 2 spaces, 4 spaces, or a tab, and the tool lays each rule out with one declaration per line and consistent spacing around braces, colons, and semicolons. A minified or messy stylesheet becomes clean and readable. Then copy or download the result — nothing leaves your browser.

Does this upload my CSS, and does it work offline?

No upload, and yes it works offline. All formatting happens in your browser using JavaScript — there's no server receiving your stylesheet, no logging, and no tracking of your content. That makes it safe for proprietary or vendor CSS. Once the page has loaded it keeps working with no internet connection, which you can confirm in your browser's network tab.

Does formatting change which styles apply?

No. Formatting only changes whitespace and layout, which CSS ignores, so the exact same rules apply in the exact same order — the cascade and specificity are untouched. Your page looks identical before and after. The tool simply makes the stylesheet readable; it never adds, removes, or reorders rules in a way that affects how styles resolve.

What indentation should I use?

It's a style choice. 2 spaces keeps stylesheets compact and is a common default; 4 spaces is more spread out; a tab lets each editor set its own width. Indentation is purely cosmetic and doesn't affect how CSS applies, so pick whatever matches your project's or team's conventions. You can always reformat with a different setting later.

Can it unminify (expand) minified CSS?

Yes — that's a core use. Minified CSS crams everything onto as few lines as possible; the formatter reverses that, giving each rule its own block and each declaration its own line with proper spacing. The result is functionally identical but readable, so you can inspect or edit a stylesheet that shipped minified. (It can't recover original comments that minification removed, though.)

What's the difference between formatting and minifying CSS?

Formatting (beautifying) adds indentation and line breaks to make CSS readable; minifying removes whitespace, comments, and redundancy to make the file as small as possible for faster loading. You beautify while developing and minify for production. This tool beautifies (and can minify) — or use the dedicated CSS Minifier for the reverse.

Does it add vendor prefixes or lint my CSS?

No. It's a beautifier, not a linter or autoprefixer. It won't add -webkit-/-moz- prefixes, remove unused or duplicate rules, warn about invalid properties, or optimise your stylesheet. It only lays out the CSS you give it cleanly. For prefixing and linting, use tools like Autoprefixer and stylelint as part of your build.

Does it handle @media, @keyframes, and nested at-rules?

Yes. At-rules like @media, @supports, and @keyframes contain nested rules, and the formatter indents those inner rules to the correct depth so the structure stays clear. This is important for responsive stylesheets, where media queries can nest several rules — beautifying keeps that nesting obvious rather than flattening it.

Does it work with SCSS or LESS?

Partly. The formatter targets plain CSS, so standard CSS inside an SCSS/LESS file will lay out fine, but preprocessor-specific syntax — nesting, variables, mixins, & references — may not format perfectly, because those are compiled languages rather than CSS. For SCSS/LESS specifically, a preprocessor-aware formatter (like one built into your editor or a Prettier plugin) will do a better job.

Can I load a CSS file instead of pasting?

Yes. You can open a local .css file and the tool reads it directly in your browser with the FileReader API — the contents load into the editor without being uploaded anywhere. This is convenient for larger stylesheets or ones you'd rather not copy and paste, and it's exactly as private as pasting the CSS by hand.

Can it format very large CSS?

Usually yes. Because it runs locally, the limit is your device's memory and CPU rather than a server cap, and modern browsers handle large stylesheets well. Very large or heavily nested files can get slow, but there's no upload size limit from us and nothing is sent anywhere — it's purely a matter of local performance.

Is it free, and are there limits?

Yes, completely free — no payment, no signup, no account, and no usage caps or watermarks. Since everything runs in your browser, there's nothing for us to meter; the only practical limit is your device's performance on very large stylesheets. Use it as much as you like, including offline once the page has loaded.

Does sorting properties change how my CSS behaves?

It can, which is why it is off by default. Sorting puts the declarations inside each rule into alphabetical order, and CSS resolves a repeated property by taking the LAST one — so a deliberate fallback pair like background: #06c; followed by background: linear-gradient(…); comes back in the wrong order and the gradient stops applying in the browsers that supported it. The same goes for a shorthand written before a longhand that refines it, such as margin then margin-top. The sort here is stable, and it leaves comments and at-rules where they are so a comment never drifts away from the declaration it explains, but it cannot know which repeats were intentional. Use it on stylesheets you wrote and know; leave it off for vendor CSS.

Still have questions?

If you can't find the answer you're looking for, feel free to contact our support team.

CSS Formatter & Validator

Privacy Focused

Instant Results

No Signup

Browser Based