CSS beautifier and formatter

How to beautify CSS

Paste minified or messy CSS into the input pane and click Convert. Prettier's CSS parser, running in your browser, prints it again with one selector and one declaration per line, two-space indentation, a space after each colon and a blank line between rules. Copy the result or download it as a .css file. It is a quick way to read a minified stylesheet from a website or a library.

Why beautify CSS

Minified or messy CSS is painful to edit. Formatting it brings back the structure, so you can find and change rules with confidence.

Works with modern CSS

Nested media queries and custom properties format correctly. Selectors and values are not changed.

When to use it

Read the minified CSS of a site or theme you need to override, tidy styles copied from browser developer tools, review a stylesheet someone sent you, or clean up CSS before you commit it. Prettier's output is the same style many teams enforce in their editors, so the code fits in with formatted projects.

Before you start

Input: CSS. Output: Formatted CSS. The settings appear before anything runs, so you can check them first. Your original file is never changed.

The value you enter is processed in your browser. Still test the output where it will be used. Clean formatting does not prove the data is safe or correct.

Keep the original until you have opened and checked the result. The work happens in this browser tab, so the size you can handle depends on your device's memory, your browser and the file itself.

How to use the CSS beautifier and formatter

1. Paste your CSS into the input pane.
2. Click Convert to format it.
3. Copy the result or download it as a .css file.