Developer Tools
CSS Formatter & Minifier
Make minified or messy CSS readable again, with one property per line and consistent indentation, or minify your stylesheet to make it smaller for production.
Format CSS
Paste CSS and choose Format or Minify.
How to Use the CSS Formatter
- Paste a stylesheet, for example minified CSS from a theme or a block copied from your browser's developer tools.
- Choose your indentation and press Format to put each rule and property on its own line.
- Press Minify to remove comments, spaces and line breaks for production.
Example
Minified: .btn{color:#fff;background:#2563eb}
.btn {
color: #fff;
background: #2563eb
}Why Minify CSS?
Smaller CSS files download and parse faster, which helps page speed and Core Web Vitals scores such as First Contentful Paint. Minifying typically saves 15–30% before compression. Keep a readable copy for editing and publish the minified version. Comments that start with /*!, often used for licence notices, are kept.
Formatting Tips
- Formatting is a quick way to understand third-party themes and to find the rule that is overriding your style.
- If formatting produces odd results, look for a missing closing brace
}; everything after it will be nested incorrectly. - The formatter handles media queries, keyframes, custom properties and modern nested CSS. Preprocessor syntax such as SCSS and Less is mostly supported.
Privacy
Your CSS is processed in your browser and never uploaded.
Frequently Asked Questions
Does minifying CSS change how my site looks?
No. Minifying removes only comments and unnecessary whitespace. The rules themselves are unchanged.
Can I format SCSS or Less?
Most SCSS and Less syntax formats correctly, including nesting and variables. Check complex mixins after formatting.
Are licence comments removed when minifying?
Comments beginning with /*! are kept so licence notices stay in place. Other comments are removed.
Is my CSS uploaded?
No. Everything runs in your browser.