To beautify CSS, paste your stylesheet into the input editor or drop a .css or .scss file on the Open a file box, then select Beautify. The formatted, syntax-highlighted result appears on the right. Pick 2 spaces, 4 spaces or Tab under Indentation, then copy the output or select Download to save it.
How to format CSS with the CSS beautifier
- Add your CSS. Paste it into the input editor, or select Choose file to open a .css or .scss file. You can also drag a file onto the Open a file box.
- Choose your style. Leave Code mode on Auto detect or force CSS or SCSS, then set Indentation, Brace style, Space between rules and Sort properties.
- Format it. Select Beautify or press Ctrl+Enter (Cmd+Enter on a Mac). Changing any option afterwards reformats the output straight away.
- Save the result. Select Copy output, or Download to save it with the original file name. Use output as input moves the result back into the editor if you want to keep working on it.
What does a CSS beautifier do?
A CSS beautifier, also called a CSS formatter, rewrites a stylesheet with consistent line breaks and indentation so a person can read it. It only changes whitespace and layout. Selectors, properties and values stay exactly as they were, so the browser applies the same styles before and after.
Minified CSS from a production site looks like this:
.card{padding:20px;border-radius:16px}.card h2{font-size:24px}@media (max-width:768px){.card{padding:16px}}After you select Beautify with the default settings (2 spaces, brace on the same line, one blank line between rules):
.card {
padding: 20px;
border-radius: 16px
}
.card h2 {
font-size: 24px
}
@media (max-width:768px) {
.card {
padding: 16px
}
}The last declaration in each block has no semicolon because the minifier removed it, and the beautifier doesn't add it back. That's still valid CSS. Plain CSS is formatted with the open-source js-beautify library. SCSS uses a lighter built-in formatter that indents nested rules by depth.
CSS formatter options explained
| Option | Choices | What it changes |
|---|---|---|
| Code mode | Auto detect, CSS, SCSS | Auto detect switches to SCSS when it sees $variables, @mixin, @include, @use, @extend or & selectors, or a .scss file name |
| Indentation | 2 spaces, 4 spaces, Tab | The indent for each nesting level |
| Brace style | Same line, next line | Whether { sits after the selector or on its own line |
| Space between rules | 0, 1 or 2 blank lines | Gaps between rule blocks |
| Sort properties | Keep original order, Alphabetical | Orders declarations A to Z inside each rule |
Be careful with Alphabetical when a rule mixes a shorthand and its longhand. In margin-top: 0; margin: 10px; the shorthand wins because it comes last. Sorted A to Z, margin moves first and margin-top: 0 now wins, which changes the layout. Keep the original order for stylesheets that rely on this.
How to unminify CSS from a website
Open the site, find the stylesheet in your browser's developer tools (the Sources panel in Chrome and Edge, or Style Editor in Firefox), and copy its contents. Paste it here and select Beautify. CSS minifiers remove whitespace and comments but don't rename selectors or properties, so unminified CSS is fully readable. Any comments the author wrote are gone for good, though.
The Search output box highlights every match for a selector, property or value in the formatted result and shows the count, which helps when you're hunting for one rule in a few thousand lines. If the site also ships minified scripts, the JavaScript beautifier does the same job for JS.
Validate, beautify or minify CSS
Validate runs a structural check and lists problems with line numbers: unexpected or missing braces, unclosed parentheses or brackets, unclosed strings and comments, and in CSS mode, declarations that are missing a colon. It doesn't know which property names or values are valid, so a typo like colr: red passes. Use it to find the brace that broke your file, not as a full CSS validator.
Minify strips comments (except /*! */ license notes) and collapses whitespace while reading strings and url() values as whole tokens. It keeps the single spaces that change meaning: around + and -, so calc(1rem + 4px) stays valid, and before : or (, so a descendant selector like .menu :hover doesn't turn into .menu:hover. It doesn't merge rules or shorten colours, so a build tool's minifier will still save a little more. To compare two versions of a stylesheet line by line, paste both into the diff checker.
Frequently asked questions
Does beautifying CSS change how it works?
No. Beautifying only changes spaces, line breaks and indentation, which browsers ignore. The one exception is the optional Alphabetical sort, which can change the result when a shorthand and a longhand property set the same value.
How do I unminify CSS?
Paste the minified CSS into the editor and select Beautify. Each rule and declaration is put on its own line with indentation. Comments removed by the original minifier can't be recovered.
Can I format SCSS with this tool?
Yes. Auto detect recognises SCSS from variables, mixins, @use and & selectors, or you can set Code mode to SCSS. Nested rules are indented by depth. Indented .sass syntax isn't supported.
Is my CSS uploaded anywhere?
No. Formatting, validation and minifying run in your browser. Files you open are read locally and never sent to a server.
Does Validate check for invalid CSS properties?
No. It checks structure, such as matching braces, parentheses, brackets, strings and comments, and missing colons in CSS mode. Misspelled property names or wrong values aren't flagged.
Are there keyboard shortcuts?
One. In the input editor, Ctrl+Enter beautifies (Cmd+Enter on a Mac). The Tab key inserts an indent; press Escape first if you want Tab to move to the next control.