CSS Beautifier
Format messy or minified CSS into readable stylesheet text.
Use 0 for no indentation; invalid values reset to 4 spaces before formatting.
What is Beautifying CSS?
Beautifying CSS means rewriting an existing stylesheet with consistent whitespace, indentation, line breaks, selector separators, braces, and semicolon placement while preserving the CSS rules and declarations themselves. It is useful when reviewing minified stylesheets, pasted snippets, generated CSS, or inherited code that is technically valid but difficult to scan.
This tool formats the text you enter in the browser and writes the result to the output box. It is designed for common CSS syntax such as style rules, declarations, comments, strings, URLs, at-rules, media queries, supports queries, page rules, font-face rules, and keyframes. Options let you choose the indentation size, use tabs instead of spaces, insert blank lines between rules, split comma-separated selector lists onto separate lines, preserve indentation on empty lines, and end the output with a trailing newline.
The beautifier is a formatter, not a compiler, linter, minifier, autoprefixer, or CSS validator. It does not rename selectors, change property values, resolve cascade or specificity issues, check browser support, fetch imported files, or guarantee that invalid CSS becomes valid. If the input contains incomplete or experimental syntax, the output may still need manual review and validation against the CSS specifications or your target browsers.
For safety, treat pasted CSS like source code. Review third-party snippets before using them in production, especially when they contain external URLs, custom properties, imports, or large generated blocks.