CSS minifier / beautifier
Minify and beautify CSS
Paste any CSS — a single rule, a full stylesheet, or vendor-generated output.
This tool runs entirely in your browser. Your CSS is never uploaded or sent to a server.
About this tool
CSS minification removes whitespace, comments, and redundant characters from stylesheets without changing how they render. Smaller CSS files load faster and reduce bandwidth costs, which matters especially for mobile users or high-traffic pages. The beautifier does the reverse — it takes minified or poorly formatted CSS and expands it into a readable structure with consistent indentation, making it easier to understand and debug stylesheets.
Common uses
- › Minifying CSS before deploying to production
- › Reducing stylesheet size to improve page load times
- › Expanding vendor or framework CSS to understand it
- › Quickly cleaning up auto-generated or concatenated stylesheets
- › Checking what a minified stylesheet actually contains
Example
.card{background:#fff;border:1px solid #ddd;padding:16px;border-radius:8px}.card {
background: #fff;
border: 1px solid #ddd;
padding: 16px;
border-radius: 8px;
}Technical notes
- › Minification is purely syntactic — it does not remove unused selectors or merge duplicate rules the way a bundler's CSS optimizer might.
- › Comments (/* ... */) are stripped during minification, so keep an unminified source copy if the comments matter.
- › Beautifying does not validate CSS syntax; malformed CSS may format oddly rather than raise an error.
FAQ
Does minifying CSS change how my page looks?
No. Minification only removes whitespace, comments, and redundant characters — the resulting styles are functionally identical to the original.
Will this remove unused CSS rules?
No. This tool only reformats the CSS you provide; removing unused selectors requires analyzing your HTML/JS and is outside the scope of a minifier.
Can I minify SCSS or LESS files?
This tool expects plain CSS. Compile SCSS or LESS to CSS first. Then minify the output.