CSS Minifier
Minify CSS safely in your browser: comments and whitespace go, but strings, data URLs, custom properties and the spaces calc() needs are preserved. See exactly how many bytes you saved, then copy or download the result.
CSS ToolsHow to use CSS Minifier
- Paste your stylesheet into the input panel.
- The minified result appears immediately, with the byte saving shown above it.
- Switch to Beautify to expand a minified stylesheet back into readable CSS.
- Copy the output, or download it as styles.min.css.
- Watch for the warning banner: it appears when braces or parentheses do not balance.
Examples
A rule with a comment and padding
Comments and every optional space disappear.
/* Cards */
.card {
padding: 24px;
border-radius: 20px;
}The minified result
Same rules, 60% fewer bytes.
.card{padding:24px;border-radius:20px}What is deliberately left alone
The spaces around the minus sign in calc() are required by the CSS grammar, and removing them would break the rule.
.a { width: calc(100% - 20px); }
.b::after { content: "} not a brace {"; }Features
- Live minification as you type, with no button to press
- Byte-accurate before, after, saved and percentage figures
- Safe by design: strings, data: URLs, custom properties and calc() spacing are untouched
- Keeps /*! bang comments so licence headers survive
- Removes empty rules, duplicate semicolons and the final semicolon in a block
- Shortens 0.5 to .5 and 0px to 0 only where it cannot change meaning
- Beautify direction runs Prettier in your browser
- Structural warning when brackets do not balance
- Autosaves your draft locally; nothing is uploaded
Frequently asked questions
- How much smaller will my CSS get?
- Typically 15-35% before gzip, depending on how much whitespace and commenting the source has. The tool shows the exact figure for your file in UTF-8 bytes, which is what actually travels over the wire.
- Will minifying break my stylesheet?
- It should not. This minifier only removes whitespace and comments; it never reorders declarations, merges rules or rewrites colours. Those transformations save a few more bytes but can change behaviour in edge cases.
- Does it handle data URLs and base64 images?
- Yes. Unquoted url() values are copied through verbatim apart from trimming the edges, so a base64 payload containing spaces, braces or slashes survives intact.
- What happens to CSS custom properties?
- Custom property values are a raw token stream rather than a parsed value, so they are preserved as written with only run-of-whitespace collapsing. That keeps values such as --shadow: 0 2px 4px rgba(0,0,0,.2) working.
- Are comments always removed?
- Normal comments are removed. Comments beginning /*! are kept, which is the convention for licence and attribution headers that must stay in the distributed file.
- Should I still gzip after minifying?
- Yes. Minification and compression solve different problems and compound: gzip or brotli on a minified file is smaller than either alone. Most hosts, Cloudflare included, compress automatically.
Related tools
About CSS Minifier
CSS Minifier is part of CSS Tools on ToolHive, a growing collection of small, focused utilities for developers, designers and students. Minify, beautify and explore CSS so your stylesheets stay small and readable. Everything runs client-side, so your data never leaves the browser tab — which makes these tools safe to use with work-in-progress code and private content.