Skip to content

CSS Beautifier

Beautify minified or messy CSS into readable, consistently indented rules with one declaration per line.

Runs in your browserCSS → CSS
Loading tool…

Example

Input
.btn{color:#FFF;padding:4px 8px}.btn:hover{color:red}
Output
.btn {
  color: #fff;
  padding: 4px 8px;
}
.btn:hover {
  color: red;
}

How to use the CSS Beautifier

  1. Paste or type your CSS into the input area, or open a file from your device.
  2. Adjust the options above the editor if the tool offers any.
  3. Review the CSS result, then copy it or download it as a file.

Privacy and limitations

  • Your data is processed on your device and is not uploaded to any server.

Related converters

SCSS FormatterFormat SCSS/Sass stylesheets with Prettier, handling nesting, variables, mixins and maps.Less FormatterFormat Less stylesheets with Prettier, keeping variables, mixins and nested rules readable.CSS MinifierMinify CSS by stripping comments and whitespace and dropping redundant semicolons, without touching strings or URLs.TypeScript FormatterFormat TypeScript and TSX with Prettier, including interfaces, generics, enums and decorators.JavaScript BeautifierFormat and beautify JavaScript (including JSX and modern syntax) with Prettier: indentation, quotes and semicolons.HTML BeautifierBeautify HTML with Prettier: consistent indentation plus formatting of embedded CSS and JavaScript.Markdown FormatterNormalise Markdown with Prettier: consistent list markers, headings, emphasis and table alignment.GraphQL FormatterFormat GraphQL queries, mutations, fragments and schema definitions (SDL) with Prettier.

Browse all beautifiers & formatters →