CSS Formatter & Beautifier

Paste messy or minified CSS to get clean, consistently indented code, or switch to Minify to strip comments and whitespace for production. Everything runs in your browser.

Indent260 bytes in, 328 bytes out (26% larger)

Input CSS

Formatted CSS

CSS

/* Example: paste your own CSS */
.card {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 1.5rem;
}

.card-title,
.card h3 {
  font-size: 1.25rem;
  margin: 0 0 .5rem;
  color: #1a1d1f;
}

@media (min-width:768px) {
  .card {
    padding: 2rem;
  }
  .card-title {
    font-size: 1.5rem;
  }
}

Formatting runs entirely in your browser. Your CSS is never uploaded.

What is a CSS formatter?

A CSS formatter, or beautifier, rewrites a stylesheet with consistent indentation, one declaration per line and predictable spacing, without changing what the CSS does. It makes minified or hand-edited CSS readable again, which helps when you debug, review or edit a theme. This tool can also minify CSS, removing comments and extra whitespace to make the file smaller.

How to use the CSS formatter

1
Paste your CSS into the Input CSS box. A short example is loaded so you can see the result first.
2
Choose Beautify to format the code, or Minify to compress it.
3
In Beautify mode, pick an indent of 2 spaces, 4 spaces or a tab.
4
Copy the result or download it as a .css file. The size readout shows how many bytes you saved or added.

What the formatter changes

Puts each declaration on its own line, with one space after the colon.
Puts each selector in a comma-separated list on its own line and spaces out combinators such as > and +.
Indents nested blocks, such as rules inside @media and @supports.
Leaves strings, url() values and comments untouched while beautifying.
In Minify mode, removes comments, line breaks, extra spaces and the last semicolon in each block.

Frequently asked questions

Will formatting change how my CSS works?

No. Beautify only changes whitespace and line breaks, so browsers apply your styles exactly as before. Minify also removes comments. Neither mode renames selectors, merges rules or rewrites values.

Is my CSS uploaded anywhere?

No. The formatter is written in JavaScript and runs in your browser, so your code never leaves your device. You can safely use it for private or client stylesheets.

Does it support SCSS or Less?

It is built for plain CSS, including nesting and custom properties. SCSS or Less that only uses nesting and variables usually formats correctly, but // line comments and other preprocessor syntax are not supported, so use a Sass-aware formatter such as Prettier for those files.

Should I minify CSS for production?

Yes, in most cases. Minified CSS is smaller, so it downloads faster. Keep the formatted version as your source file and minify a copy before you deploy. Server compression such as gzip or Brotli reduces the transfer size further on top of minification.

Stop tweaking snippets. Build the whole site

This tool fixes one piece. Canvas Builder builds the entire page from a single prompt: sections, copy, styling, and responsive layout. You own the code.

Start building free Build a site from this