Minified CSS is almost impossible to edit. The CSS Beautifier turns a stylesheet on one line, a snippet from DevTools or an uploaded .css file into clean, indented rules. Formatting is done by the js-beautify library in your browser, so the file never leaves your computer.
Cramped rules become readable ones.
Each selector starts a new block, each declaration sits on its own line, and rules inside at-rules such as @media are indented a level deeper. When a rule has a list of selectors, each one goes on its own line by default, which makes long lists easier to scan.
Only whitespace and line breaks change. Selectors, properties, values and their order stay exactly as they were, so the stylesheet works the same. A whole file on one line formats the same way as a neatly spaced one.
Match your project.
Pick an Indent of 1, 2, 3, 4 or 8 spaces, or Tab. There is no official standard. Two spaces is the most common choice and Prettier's default, while four spaces and tabs are also widely used.
The checkboxes control the rest of the layout: Blank line between rules, Each selector in a list on its own line, Spaces around > + ~ and Keep existing blank lines. Turn on Live mode and the output follows every change.
Sort properties A to Z puts the declarations in each rule in alphabetical order, with vendor prefixes next to the property they belong to. It is the one option that reorders code, so leave it off if a rule relies on order, such as a shorthand that follows a longhand.
Three steps.
Comments that were stripped during minifying cannot be brought back.
Where it fits.
The tool is built for plain CSS. Simple SCSS or LESS nesting and variables often format fine, but mixins and functions may not indent as expected. For a Sass or Less project, Prettier supports both languages.
If you work in VS Code, Format Document formats CSS without an extension. This page is handy when you just want to paste, format and copy without opening an editor.
The other half of the cycle.
Once your edits are done, click Minify instead to squeeze the same input onto one line, or paste the file into the CSS Minifier, which also keeps license comments, shortens colors and shows the bytes saved. For markup, the HTML Beautifier does the same job as this page.
Try it now
The tool is one click away. No sign up, no upload, no payment.
Open CSS Beautifier