CSS Formatter

About the CSS Formatter

Minified CSS is great for performance but nearly impossible to read or edit. The CSS Formatter expands stylesheets back into a readable layout with each selector on its own line, one declaration per line, consistent indentation and blank lines between rules.

It handles media queries, keyframes, nested at-rules and comments. Use it to inspect the CSS of a website, clean up code generated by tools, or standardize formatting before committing to version control. Formatting is performed in your browser using the js-beautify library.

Before and after: what formatting does to CSS

A minified rule is hard to read and harder to edit:

.btn{padding:8px 16px;border-radius:6px;background:#2563eb;color:#fff}.btn:hover{background:#1d4ed8}

After formatting, each selector and property sits on its own line:

.btn {
  padding: 8px 16px;
  border-radius: 6px;
  background: #2563eb;
  color: #fff
}

.btn:hover {
  background: #1d4ed8
}

Practical uses

• Learning from other sites: copy a stylesheet from your browser's developer tools and format it to see how a layout or animation is built.
• Finding duplicate rules: once every property has its own line, repeated or conflicting values are easy to spot.
• Cleaner code reviews: formatting your files the same way before saving them keeps change history focused on real edits, not on spacing.

Remember that formatting only changes whitespace. If a style does not work, the problem is in the selector or value, not in the layout of the code. When you are done editing, run the CSS Minifier again for the production version.

How to use the CSS Formatter

1. Paste your CSS into the input box.
2. Choose the indentation style.
3. Click Format CSS.
4. Copy the formatted stylesheet.

Frequently asked questions