# CSS beautifier

> Beautify CSS with Prettier for consistent indentation and spacing, or minify it to one line. Free, no sign-up, and it runs in your browser.

Canonical: https://toolspace.tech/css-beautifier/
Last updated: 2026-10-25

Beautify CSS with Prettier, one declaration per line, or switch to Minify for a single compact line ready to ship. SCSS nesting and variables are understood, and syntax errors are reported with their line.

This is an interactive tool that runs in the browser: [open the CSS beautifier](https://toolspace.tech/css-beautifier/) to use it. Nothing typed into it is uploaded.

## Worked example

Minify mode on a small rule set. The spaces inside calc() and before :focus-visible are kept on purpose.

**css**

```
/* buttons */
.btn {
  padding: 8px 12px;
  width: calc(100% - 16px);
}

.toolbar :focus-visible {
  outline: 2px solid currentColor;
}
```

**minified**

```
.btn{padding:8px 12px;width:calc(100% - 16px)}.toolbar :focus-visible{outline:2px solid currentColor}
```

“.toolbar :focus-visible” (any focused element inside the toolbar) and “.toolbar:focus-visible” (the toolbar itself) are different selectors, so that space stays.

## Common mistakes

### Minifying the only copy

Keep the readable file as your source and minify when you publish. Editing minified CSS by hand is slow and error-prone.

### Removing spaces in calc() by hand

calc(100%-16px) is invalid: + and - need a space on both sides. The minifier keeps them.

### One missing closing brace

A block left open swallows every rule after it, so styles break far from the real mistake. The formatter points to where the block began.

### An accidental space before a pseudo-class

“.btn :hover” styles hovered elements inside the button, not the hovered button. Formatting keeps that space, so check it when a hover style seems ignored.

## How it works

1. **Paste your stylesheet:** Minified CSS from a site, a messy file, or SCSS. Open or drop a .css or .scss file to read it locally.
2. **Format or minify:** Format indents rules and puts each declaration on its own line. Minify removes comments and every space that doesn’t matter.
3. **Compare the size:** The status line shows the size before and after minifying, so you can see what you saved.

## Questions

### What exactly does Minify remove?

Comments (except /*! … */ licence comments), line breaks, indentation, spaces around braces, semicolons, commas and selector combinators (> + ~), spaces after colons, and the last semicolon in each block. Strings, url() values and the spaces around + and - inside calc() stay, because removing them would change or break the CSS.

### Does minifying shorten colors or merge rules?

No. It only removes whitespace and comments, so the result behaves exactly like the original. Optimizers such as cssnano or Lightning CSS go further, with more risk.

### Does it validate my CSS?

It catches syntax errors, like a block that is never closed, and shows the line. It doesn’t check whether property names or values exist.

### Does it work with SCSS?

Yes. The SCSS parser also reads plain CSS, so nesting, $variables, @mixin and @include format as expected.

## Related

- [Code beautifier](https://toolspace.tech/code-beautifier/)
- [HTML beautifier](https://toolspace.tech/html-beautifier/)
- [CSS gradient](https://toolspace.tech/css-gradient-generator/)
- [Color converter](https://toolspace.tech/color-converter/)