CSS Prettify

What is CSS Prettify?

Paste minified or compact CSS and get it reformatted into clean, indented code instantly, powered by Prettier, the same formatter many code editors use. Handy when you've pulled a stylesheet from a production site's devtools, a bundler's output, or a legacy file that was minified years ago and never checked into version control readable. Reformatting it makes the selectors and rules actually reviewable before you edit them. The formatting runs in your browser, so the CSS never has to leave your machine.

How to Use CSS Prettify

1. 1

   Paste the Minified CSS: Enter compact or minified CSS, such as one pulled from devtools.

2. 2

   Read the Formatted Result Instantly: The reformatted, indented code appears automatically as you type.

3. 3

   Copy the Result: Use the copy button to copy the readable CSS.

How It Works

Prettier's CSS parser reads the stylesheet into an AST (an internal structural representation of the rules, selectors, and declarations), then re-prints it with consistent 2-space indentation, one declaration per line, and a space after each colon, regardless of how the original was spaced or broken across lines. The rules and values themselves aren't changed, only how they're laid out on the page.

Example

.card{padding:16px;border-radius:8px;background:#fff}

.card {
  padding: 16px;
  border-radius: 8px;
  background: #fff;
}

Each declaration moves to its own line, with consistent indentation and a space after each colon.

Common Use Cases

• Reading a minified stylesheet pulled from a live site's devtools "Sources" panel, where the original source map isn't available.

• Cleaning up CSS generated by a build tool or scaffolding script before hand-editing it.