CSS Formatter

Format, prettify, and minify CSS stylesheets. Supports CSS3, SCSS, and LESS syntax.

Input
Paste your CSS code
Output
Formatted CSS

CSS Formatter

This tool formats and beautifies CSS stylesheets to make them readable and maintainable. It supports CSS3, SCSS, and LESS syntax.

Features

Format/Prettify

Converts minified CSS into well-structured, readable stylesheets with proper indentation.

Minify

Removes all unnecessary whitespace and comments to reduce file size for production.

Formatting Options

Indent Size

Choose the number of spaces for indentation (2 or 4).

Selector Separator

How selectors are separated (same line or new line).

End with Newline

Add a newline at the end of the file.

Best Practices

Organization

  • Group related properties together
  • Use consistent property ordering
  • Comment complex sections
  • Use meaningful class names

Performance

  • Minify CSS for production
  • Remove unused selectors
  • Combine duplicate rules
  • Use shorthand properties

Example

Before:

.button{display:inline-block;padding:10px 20px;background:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer;}.button:hover{background:#0056b3;}

After:

.button {
  display: inline-block;
  padding: 10px 20px;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.button:hover {
  background: #0056b3;
}