CSS Formatter
Beautify messy or minified CSS into clean, indented rules — or minify it for production — right in your browser.
Suggested tools
About CSS Formatter
CSS Formatter turns minified or messy stylesheets into clean CSS with one rule per block, one declaration per line and consistent two-space indentation. It is the fastest way to read a minified file from a website, review a teammate's styles or tidy CSS copied from a design tool.
The same page can also minify CSS when you are ready to ship it. Everything runs locally in your browser — the text you paste is never uploaded.
How to use CSS Formatter
- Paste your CSS, upload a .css file or click Sample.
- Press Beautify to format it, or Minify to compress it.
- Copy the result or download it as a file.
Key features
- Beautify and Minify on one page
- Handles media queries, nested at-rules and comments
- Formatting powered by the widely used js-beautify library
- Works offline once the page has loaded
Example
.btn{color:#fff;background:#2563eb}.btn:hover{background:#1d4ed8}.btn {
color: #fff;
background: #2563eb
}
.btn:hover {
background: #1d4ed8
}When to use CSS Formatter
- Reading the minified stylesheet of a website you are debugging.
- Tidying CSS copied from a design tool or a code snippet.
- Making a stylesheet consistent before a code review.
Tips and common problems
- Keep your formatted source file and only ship the minified version.
- If the result looks wrong, look for a missing } — formatting follows the braces you wrote.
- For SCSS-heavy files, a project formatter such as Prettier handles every feature.
Frequently asked questions
No. Only whitespace and line breaks change; selectors, properties and values stay exactly the same.
Plain SCSS/LESS that looks like CSS usually formats well, but special syntax such as mixins with complex arguments may not be laid out perfectly.
It formats what you give it; it does not validate properties or repair invalid rules.