CSS Formatter

What a CSS formatter does

A CSS formatter takes a stylesheet and rewrites its layout without changing what it means. Every rule gets its own block, every declaration gets its own line, and nested blocks such as media queries are indented one level deeper. The result is the same CSS, only easier to read, review and edit.

This is useful when you copy styles from a minified file, open a theme that was written by hand over many years, or paste CSS from a browser’s developer tools. It also helps before a code review, because consistent formatting means the diff only shows real changes.

How to use this CSS formatter

1. Paste your CSS into the left box. It is formatted as soon as you paste.
2. Or press Open file to load a .css file from your device, or Sample to try it with example code.
3. Pick the Indent you want: 2 spaces, 4 spaces or Tabs.
4. Set the Line width. Long selector lists and values wrap when they pass this width.
5. Turn on Single quotes if your project prefers 'Inter' over "Inter".
6. Press Format (or Ctrl+Enter) to beautify, or Minify to compress.
7. Press Copy or Download to take the result.

Once you have formatted something, the output updates while you type. If the CSS has a syntax error, the message under the boxes says where it is, and Show in input jumps to that spot.

Before and after

Here is a block of minified CSS:

.card{display:flex;padding:16px 24px;border:1px solid #ddd}.card>h2,.card .title{font-size:1.25rem;margin:0 0 8px}@media (max-width:600px){.card{flex-direction:column}}

After Format with 2 spaces:

.card {
  display: flex;
  padding: 16px 24px;
  border: 1px solid #ddd;
}
.card > h2,
.card .title {
  font-size: 1.25rem;
  margin: 0 0 8px;
}
@media (max-width: 600px) {
  .card {
    flex-direction: column;
  }
}

Notice that the child combinator > gets a space on each side, each selector in the list sits on its own line, and the rule inside the media query is indented. Comments are kept where you wrote them.

Minifying CSS

Minify goes the other way. It removes comments and the whitespace that browsers do not need. Running it on the formatted code above gives back one line:

.card{display:flex;padding:16px 24px;border:1px solid #ddd}.card>h2,.card .title{font-size:1.25rem;margin:0 0 8px}@media (max-width:600px){.card{flex-direction:column}}

The minifier is careful on purpose. It keeps the space in div :first-child, because removing it would change the selector. It keeps the spaces inside calc(100% - 2rem), because calc needs them. It leaves strings and url() values alone. Comments that start with /*! are kept, since they usually hold a license:

/*! Theme v2 | MIT */ .btn{padding:8px 12px;color:#fff}

It does not merge duplicate rules, shorten colors or drop unused selectors. For that level of optimization, use a build tool such as cssnano or Lightning CSS in your project.

Reading error messages

The formatter needs valid CSS to work. If a brace is missing, you get a message like this:

Line 1, column 1: Unclosed block

The position points to the block that was opened but never closed. Common causes are a missing } at the end of a rule, a stray { after a selector, or an unclosed comment. Fix the problem and press Format again.

The tool does not check whether property names or values are real. colr: red is valid syntax, so it is formatted, not flagged. A linter such as Stylelint catches that kind of mistake.

Tips

• Use 2 spaces unless your project already uses something else. It is the most common choice in CSS style guides.
• Keep the minified file as a build output and the formatted file as your source. Editing minified CSS by hand is error prone.
• If the CSS lives inside an HTML file in a style tag, paste the whole page into the HTML formatter. It formats the inline CSS too.
• Sass files with nesting and $variables belong in the SCSS formatter.

Other ways to format CSS

• VS Code: open the file and run Format Document (Shift+Alt+F on Windows, Shift+Option+F on macOS). Install the Prettier extension to get the same output as this page.
• Command line: npx prettier --write styles.css formats a file in place with Prettier.
• Browser developer tools: the Sources panel in Chrome and Firefox has a pretty print button for minified stylesheets. It is fine for reading but does not let you copy settings such as indent width.

This page is handy when you do not want to install anything, or when you need a quick check on code from somewhere else. If you also work with scripts, the JavaScript formatter uses the same engine and options.