Free CSS formatter and beautifier. Pretty-print CSS with one declaration per line, or minify to remove whitespace and comments. Handles @media. No upload.
Paste CSS on the left, read the result on the right. There is no button to press — the output updates as you type and whenever you change an option. Both directions live on the same page: Beautify expands a stylesheet into one declaration per line, and Minify strips it back down. Everything runs inside your browser tab, so nothing you paste is uploaded, logged or stored, and the tool keeps working with the network disconnected once the page has loaded.
Most people land here holding a build artefact. Your bundler emitted styles.a83f21.css as a single enormous line, an element is picking up the wrong colour, and you need to find the rule that is winning. Beautifying that file does not recover the original source — only a source map does that — but it turns one line into a few thousand, each with a line number, which is enough to search, read, and compare against what DevTools is showing you.
padding:16px becomes padding: 16px.@media and @supports one extra level.Feeding it .card{border:1px solid #ddd;padding:16px;border-radius:8px} returns:
.card { border: 1px solid #ddd; padding: 16px; border-radius: 8px;}Note the semicolon added after 8px, and that the multiple spaces inside 1px solid #ddd were left as single spaces because the value is normalised, not restructured. The hex colour is not shortened, lowercased or converted.
The Indent dropdown appears only in Beautify mode and offers three settings:
| Setting | Emits per level | When to pick it |
|---|---|---|
| 2 spaces | Two spaces (default) | Matches most modern CSS and SCSS style guides, and keeps deeply nested media queries from drifting off the right edge |
| 4 spaces | Four spaces | Older stylesheets, WordPress themes, and teams whose editor config already uses four |
| Tab | One literal tab character | Repos with indent_style = tab in .editorconfig, or when readers should choose their own display width |
Tab mode writes real tab characters. How wide they look is a setting in whatever editor you paste into, not something the tool controls.
@media and @supports are indented properly, which is the main thing that makes a minified responsive stylesheet readable again. Given @media (max-width:600px){.card{padding:8px}} the tool produces the @media prelude on its own line, the inner .card rule indented one level, its declarations indented two, and two closing braces stepping back out. The same applies to @supports (display:grid).
One honest limitation: the formatter normalises spacing inside declarations, not inside at-rule preludes. @media (max-width:600px) is reproduced exactly as written, so if the source had no space after that colon, the output will not have one either. That is cosmetic and the CSS is valid either way.
Expect this one, because it is the most common surprise. A comma-separated selector list is treated as a single selector and kept on a single line: a:hover,a:focus{...} beautifies to a:hover,a:focus { rather than putting each selector on its own line. The comma spacing you wrote is preserved as-is, so no space is inserted after the comma. If your house style is one selector per line, this tool will not produce it — that is a Prettier or Stylelint job. Everything inside the braces is still fully expanded.
Comments are preserved, not deleted. A /* ... */ comment sitting on its own between rules is emitted on its own line at the current indent level. A comment that trails a value stays attached to that value rather than being orphaned onto the next line. Because comments are scanned as opaque units, a brace or semicolon inside a comment does not confuse the parser — a commented-out rule will not break the indentation of everything after it. String literals in content: and url() values get the same treatment, so a { inside a quoted string is safe too.
The formatter does not know or care which properties are real. It reformats -webkit-box-shadow, -moz-appearance and -ms-grid-column exactly as it reformats their unprefixed equivalents, and it never reorders or removes them. That matters because prefix order is meaningful: the prefixed declaration is conventionally written first so the standard one overrides it in browsers that support both. Since the tool preserves declaration order within a block, that convention is safe.
The same applies to custom properties (--brand-blue: #2813e8), var() fallbacks, calc() expressions, CSS nesting, container queries and layer declarations. None of them is rewritten.
A recurring worry is that reformatting a stylesheet will change which rule wins. It cannot. Specificity is computed from the selector's structure — how many ID, class/attribute/pseudo-class, and type/pseudo-element parts it contains — and the cascade breaks ties by source order. Whitespace and line breaks are not inputs to either calculation. .card .title{color:red} and the same rule spread over five lines are the identical rule with the identical weight.
What this means practically: if you beautify a stylesheet to debug an override problem, the bug you are looking at is still exactly the bug you had. Reformatting is a safe first step. It just makes the two competing rules visible on separate lines so you can compare them.
One genuine caveat: the formatter preserves source order, so it also preserves the cascade. It will not "clean up" duplicate declarations of the same property in a block. If you see color twice, both lines are real and the later one is winning — that is information, not noise.
The Minify tab is a whitespace-and-comments pass. It removes every comment, then removes whitespace wherever it is not needed — around { } ; : , — and drops the final semicolon before each closing brace. The status bar reports the character count before and after. On the built-in sample stylesheet, 283 characters become 261.
Crucially, it keeps whitespace that is semantic:
.card .title keeps its space. Removing it would make it a single compound selector matching a completely different element..a > .b keeps a space on each side.calc(). calc(100% - 32px) keeps the spaces around the minus sign, which CSS requires — calc(100%-32px) is invalid and the whole declaration would be dropped by the browser.1px solid #ddd and 0 0 2px red keep their separating spaces.Be clear about what this minifier is not. It does not shorten hex colours, collapse margin longhands into a shorthand, merge rules that share a selector, deduplicate declarations, or remove rules your HTML never uses. Those are optimisations that require understanding the CSS, and doing them wrong changes rendering. A production build pipeline using cssnano or Lightning CSS will get you further; this tab gets you a safe, predictable size reduction with no behavioural risk.
Beautifying an already-beautified stylesheet with the same indent setting returns identical text. That makes the tool useful for normalising before a diff: run both versions of a file through Beautify at the same indent width, then compare, and the diff shows only real changes instead of whitespace churn. It also means minify-then-beautify is a reliable way to strip a file's original formatting entirely and impose your own.
| Situation | What to do |
|---|---|
| Debugging a minified build output | Beautify at 2 spaces, then search for the selector DevTools showed you |
| Inherited a stylesheet with no consistent indenting | Beautify at your team's width and paste it back over the file |
| Comparing two versions of a theme file | Beautify both at the same width, then diff |
| Pasting CSS into an email template or a CMS field | Minify, then copy |
| Cleaning up CSS copied out of DevTools | Beautify — the colon spacing and missing final semicolons are fixed automatically |
| Checking whether a rule really has a duplicate property | Beautify and read the block; duplicates are preserved, so they become visible |
This is a formatter, not a validator. It will happily reformat CSS containing a misspelled property or an unclosed brace — an extra closing brace just gets emitted at the outermost level and an unclosed one leaves everything after it indented a level too deep, which is itself a decent way to spot where the file goes wrong. It also does not lint, autoprefix, transpile, or sort properties alphabetically. And because it re-formats on every keystroke, a very large stylesheet will feel less responsive; that is your browser doing the work locally, which is the same reason nothing is uploaded.
They mean the same thing. A CSS formatter, or CSS beautifier, re-indents and expands a stylesheet so each rule and declaration is on its own line and easy to read. This tool also provides the reverse operation, minify, which compresses the CSS for production.
It should not. The minifier removes comments and unnecessary whitespace but deliberately preserves the spaces inside calc() expressions and around the >, +, and ~ combinators, because removing those would change the meaning of the CSS. The minified output is functionally identical to the input.
Yes. The formatter tracks block depth, so rules nested inside @media, @supports, and similar at-rules are indented one extra level, keeping the structure of responsive and conditional styles clear.
No. All formatting and minifying happens in your browser with JavaScript. Your stylesheet never leaves your device, so it is safe for proprietary or client code.
A single space after the colon in a declaration, such as color: red, is the conventional, readable style used by almost every CSS style guide. The formatter normalizes spacing so the whole stylesheet is consistent regardless of how it was originally written.
Beautify and pretty-print messy HTML with clean indentation, or minify it to strip whitespace and comments. Runs entirely in your browser.
Format, validate, and beautify JSON data with syntax highlighting and error detection
Beautify, indent, and minify XML with live validation — all in your browser.