CSS Formatter & Minifier
Beautify CSS, SCSS or Less with consistent indentation, or minify CSS to the smallest size without changing what it does.
Formatted with Prettier in your browser; your code is never uploaded.
Related Developer Tools
Use this tool both ways: beautify a minified stylesheet, or CSS copied from browser dev tools, to read and edit it, then minify the finished CSS before putting it on a site. Formatting uses Prettier, the same formatter most code editors and build setups use, and supports SCSS and Less as well as plain CSS.
Formatted and Minified
Formatted
.btn {
padding: 8px 16px;
border-radius: 6px;
}
.btn:hover,
.btn:focus {
background: #e70149;
color: #fff;
}
@media (max-width: 600px) {
.btn {
width: 100%;
}
}Minified
.btn{padding:8px 16px;border-radius:6px}.btn:hover,.btn:focus{background:#e70149;color:#fff}@media (max-width:600px){.btn{width:100%}}What the Minifier Removes and Keeps
| Removed | Kept |
|---|---|
Comments like /* header */ | License comments starting with /*! |
| Indentation and line breaks | Text inside quotes and url() |
Spaces around { } ; , > ~ and after : in declarations | Spaces in selectors (.menu a, a :hover) and around + and - in calc() |
The last ; in each block | Every rule, in its original order |
| Extra spaces inside custom properties | Their values otherwise as written (--rgb: 13, 110, 253), since scripts can read them |
Related Tools
Format the page itself with the HTML formatter and its scripts with the JavaScript formatter. For colours in your CSS, convert between formats with HEX to OKLCH, build a shade scale with the Tailwind palette generator and check readability with the contrast checker.
Frequently Asked Questions
How do I beautify CSS?
Paste the CSS, or open a .css file, and the formatted version appears as you type: one declaration per line, each selector of a group on its own line, and nested rules and @media blocks indented. Choose 2 spaces, 4 spaces or tabs, then copy the result or download it. Pick SCSS or Less under Language for those files.
Will minifying break my CSS?
No. The minifier only removes comments and whitespace that CSS ignores and drops the last semicolon in each block. It does not merge, reorder or rewrite rules, so new syntax such as nesting, @container and @layer is kept exactly. Spaces that carry meaning stay: the one in a descendant selector like .menu a, the ones around + and - in calc(), and the space in and (min-width: …). Comments starting with /*! are kept because they usually hold a license.
How much smaller does minified CSS get?
It depends on how much indentation and how many comments the file has. Bootstrap 5's CSS goes from about 280 KB to 233 KB with this minifier, within a fraction of a percent of Bootstrap's own .min.css. Since servers send CSS compressed with gzip or Brotli, the gzipped sizes shown under the result tell you how much download time you actually save.
Can I minify SCSS or Less?
Not directly. SCSS and Less are compiled to CSS by Sass or Less, and that compiler has its own option to minify the output (for Sass, --style=compressed). Minify the compiled CSS here; SCSS and Less can still be formatted.
Why does it show a syntax error?
The CSS could not be read, usually because of a missing } or an unclosed comment or string. The message shows the line and column where reading stopped. If the file uses $variables, @mixin or // comments, choose SCSS or Less under Language: those are not plain CSS.
Is my CSS uploaded?
No. Formatting with Prettier and minifying both run in your browser, in a background thread, so the page stays responsive even with large stylesheets.