Beautify minified CSS into readable rules, one declaration per line, without changing what the CSS does. Runs the same formatter as CSS Formatter.
What it does
CSS Beautifier turns minified CSS into code you can read. A stylesheet squeezed onto one line, as it comes out of a build step or shows up in the Network tab of a browser, becomes one block per rule, one declaration per line and an indentation that follows the nesting, so you can scan it, search it and review it.
It works exactly like CSS Formatter, with the same engine and the same rules. The tool changes how the CSS is written, not what it selects or sets. Use this page when the problem is CSS that is hard to read, and CSS Formatter when it is already readable and you want one consistent style.
What it supports
- Minified CSS, CSS on a single line and CSS with uneven indentation. Standard CSS only, including at-rules such as @media, @font-face, @keyframes, @layer and @page, and the native CSS nesting that browsers support.
- The layout is rebuilt from scratch, and a few spellings are made uniform: hexadecimal colors and property names in lowercase, single quotes turned into double quotes, the spacing inside values, and a semicolon after the last declaration of a block. A value with several comma-separated parts, such as a transition list, can be put one part per line.
- Numbers are re-spelled, so the result may not match your input digit for digit: 0.50px becomes 0.5px, 10.0 becomes 10, .5 becomes 0.5 and 1E3 becomes 1e3. The value stays the same; only the way it is written changes.
- Class names and element names in selectors keep the case you wrote. Comments are kept.
- The value of a custom property (a name that starts with --) is kept exactly as written, apart from the spaces around it.
- Nothing is fetched: @import and url() are only text, and the tool never loads a stylesheet or an image.
- Properties and values are not checked against the CSS specifications. A declaration such as foo: bar is formatted like any other.
Good to know
- Beautifying changes how the CSS looks, not what it does. There is no minify action for CSS here: this tool goes from compact to readable.
- CSS that was compiled from Sass, SCSS or Less is plain CSS and works here. Source files in those languages do not: a $variable, @mixin, @include, a // comment or #{interpolation} is refused, and so is a Less mixin call such as .rounded();. Nothing is compiled or converted, and some Less code that looks like plain CSS is formatted as such.
- CSS is never repaired. An unclosed block, string, comment, parenthesis or square bracket, and a stray }, ) or ], are refused with their line and column. To write a literal ) or ] inside a name or an address, escape it as \) or \]. Parentheses or square brackets nested more than 64 levels deep are refused too.
- An unquoted url() cannot contain a space, a quote or an opening parenthesis. Put the address in quotes, as in url("file name.png").
- An input made only of blank lines has nothing to beautify and gets a note asking for content. A text that holds only a comment is formatted.
- Minified CSS gets longer when it is formatted, because every declaration gets its own line and indentation. A very large minified file can pass the result size limit, or run long enough to hit the time limit, before it reaches the input size limit. If indentation would make the result far larger than the size limit, the tool stops before formatting: use 2 spaces or less nesting.
How to use it
- Paste the minified CSS from a build output or from the Network tab of your browser into the input box. Nothing runs while you type.
- Choose “2 spaces” or “4 spaces”. On this page the action button is called “Format”, as in CSS Formatter, because both tools share one engine.
- Press “Format” and read the result next to your input. If the CSS cannot be formatted, the message says why and, when it can, where.
- Press “Copy” to take the readable version with you, or “Download” to save it as formatted.css.
Examples
Beautify a one-line stylesheet
Paste the CSS below and press “Format” with “2 spaces” selected. Each rule gets its own block and each declaration its own line. The spelling is made uniform on the way: 1.0em becomes 1em, #DDD becomes #ddd, .2 becomes 0.2 and the commas inside rgba() get a space after them.
.card{display:flex;padding:0.75em 1.0em;border:1px solid #DDD}.card:hover{box-shadow:0 2px 4px rgba(0,0,0,.2)}.card {
display: flex;
padding: 0.75em 1em;
border: 1px solid #ddd;
}
.card:hover {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
A copy that was cut off
The last closing brace is missing, as when a copy stops in the middle. The tool does not guess where the rule was meant to end, so it refuses and points at the block that was never closed.
.card{padding:1em;color:redThis block is never closed. Add the matching closing brace (}).
Line 1, column 1
Selector lists and media queries
Minified selectors and conditions are spread out too. Every selector in a comma-separated list goes on its own line, the > and + combinators get a space on each side, and the media query gets its spacing back.
h1,h2,h3{margin:0 0 .5em}.nav>li+li{margin-left:1em}@media (min-width:600px) and (max-width:900px){.nav{display:none}}h1,
h2,
h3 {
margin: 0 0 0.5em;
}
.nav > li + li {
margin-left: 1em;
}
@media (min-width: 600px) and (max-width: 900px) {
.nav {
display: none;
}
}
Sass variables
A name that starts with $ is a Sass variable, which is not CSS. The tool formats standard CSS only and never compiles or converts anything, so it refuses and points at the first marker it found.
$brand: #333;
.btn{color:$brand}This looks like Sass, SCSS or Less syntax, such as a $variable, an @mixin or @include, a @variable: value, a // line comment or #{interpolation}, which this tool does not support. It formats standard CSS only and never compiles or converts anything.
Line 1, column 1
Limits and privacy
Size limits
- Input: up to 2,000,000 bytes of UTF-8 text (about 2 MB). Accented letters and emoji take more than one byte each. Larger input is rejected.
- Result: also up to 2,000,000 bytes. If the complete result would be larger, the tool shows only an incomplete preview of the first 100,000 bytes, and that preview cannot be copied or downloaded.
- Nesting: up to 256 levels of open braces, parentheses and square brackets counted together inside each other. Deeper CSS is refused because it is beyond what the tool processes.
- Brackets: an independent cap of 64 open parentheses and square brackets counted together, within the combined nesting limit above. Deeper CSS is refused because it is beyond what the tool processes.
- Time: a run that takes longer than its time limit is stopped. Try a smaller input.
Your privacy
The text you type or paste, or open from a local file, is processed locally in your browser, in a dedicated Web Worker. It is never uploaded or sent to the server (a file you open is read in your browser only), and it is not written to storage, cookies or the address bar.
“Copy” puts the result on your clipboard and “Download” saves it as a file, but only when you press the button. The file is created in your browser, so nothing is uploaded.
For the full details, see the Privacy Policy
Related tools and pages
Your text stays in the page when you switch tools in the same tab, so you can try the same text in another tool. Reloading or closing the tab ends it.