CSS Formatter

Overview

• Formats CSS packed into a single line into a readable form with proper indentation and line breaks, using Prettier.
• Unifies line breaks per property and spacing, following Prettier's standard rules, for a consistent style.
• Useful when you want to inspect the contents of built or minified CSS.

Usage

1. Enter the CSS you want to format into the text area.
2. Click the "Format" button.
3. The indented result is displayed below. Use the "Copy" button to copy it to the clipboard.

Example

body{color:red;margin:0}

body {
  color: red;
  margin: 0;
}

Use Cases

• Formatting minified CSS output by a build tool into a readable form for debugging
• Formatting another site's CSS into a readable form before referencing it
• Formatting a CSS snippet into a consistent style before including it in a code review

FAQ

Notes

• Only standard CSS syntax is supported. Meta-languages such as SCSS or LESS are not supported.
• Formatting fails if the CSS is syntactically invalid, such as when a curly brace is left unclosed.
• Formatting very large CSS may make browser processing slow.