CSS Minifier
Minify CSS by stripping comments and unnecessary whitespace.
About the CSS Minifier
The CSS Minifier on HT99 Tools strips comments, collapses whitespace, shortens hex colour codes, and removes redundant characters such as trailing semicolons — producing a smaller stylesheet that the browser parses identically to the original. Typical savings are 30–60% of the file size, depending on how verbose the source was.
CSS is whitespace-insensitive by design. The grammar treats consecutive whitespace characters as a single token, so a stylesheet written with one declaration per line and a stylesheet written with all declarations on a single line produce the same cascade. That gives minifiers a wide latitude: most of the file size in a hand-written stylesheet is whitespace and comments that the parser ignores anyway.
This tool does the four safe transformations only. It does not rewrite selectors, does not merge duplicate rules, does not convert margin: 0 0 0 0 to margin: 0, and does not re-order declarations. Those optimisations require an actual CSS parser (the W3C CSS Syntax Module Level 3 describes the tokeniser) and can change behaviour in subtle ways — especially with custom properties, @media queries, and :is() selectors.
How It Works
Comment stripping uses the regex /\/[\s\S]*?\*\//g, which matches /* ... */ non-greedily across newlines. CSS comments cannot be nested (per the CSS Syntax spec), so a single pass removes every comment. // line comments are not standard CSS and are intentionally left untouched — they would break the file in non-Chromium browsers.
Whitespace collapsing runs two passes. /\s+/g → ' ' converts every run of whitespace (including newlines) into a single space. /\s*([{}:;,>~+])\s*/g → $1 removes the spaces around the six characters that have syntactic meaning in CSS selectors and declaration blocks. The result is a single-line stylesheet where every token is separated by the minimum needed for the parser to distinguish them.
The shorten pass does three micro-optimisations: #rrggbb hex colours where each pair is the same digit become #rgb (so #ffffff → #fff, #047857 stays unchanged); ; immediately before } is removed (the last semicolon in a rule is optional); 0px becomes 0 (zero is zero in any unit). These are the safe transforms; aggressive minifiers also rewrite margin:0 0 0 0 to margin:0, but doing that correctly requires the full shorthand-expansion algorithm.
Worked Examples
The default input is a 460-byte stylesheet with a comment, a :root block defining custom properties, and a .btn rule with a :hover state. After minification with all three options enabled, the output is roughly 180 bytes — a 60% reduction.
Concretely, the comment /* HT99 Tools brand palette */ is removed; the :root block collapses from three lines to :root{--emerald-700:#047857;--amber-400:#fbbf24}; the .btn rule collapses to .btn{display:inline-block;padding:.5rem 1rem;background-color:var(--emerald-700);color:#fff;font-weight:600;border:1px solid var(--emerald-700);border-radius:6px} (note #ffffff shortened to #fff); and the trailing semicolon before the closing } in each rule is dropped.
What is intentionally not changed: the custom property names, the var(--...) references, the selector specificity, and the cascade order. The minified file produces the same rendered output as the source — only the byte count is smaller.
When to Use This Tool
- Pre-compressing production CSS before deploying to a CDN.
- Reducing the inlined
<style>block in a critical-CSS payload. - Minifying an email template's inline styles before sending.
- Producing a compact stylesheet for a widget or third-party embed.
- Comparing the size of two CSS methodologies (Tailwind utilities vs. semantic classes) by minifying each.
- Stripping comments from a shared design-system stylesheet before publishing.
- Sanitising CMS-generated CSS by removing author commentary.
Limitations & Disclaimer
This tool minifies CSS with regular expressions and is therefore conservative. It does not merge duplicate rules, rewrite shorthand values, remove unused selectors, convert @import rules to inline <link> tags, or autoprefix vendor prefixes. It does not validate that the input is syntactically valid CSS — an unclosed brace or a missing semicolon will pass through unchanged. For production builds, use a real CSS optimiser such as cssnano, clean-css, or the asset pipeline of your build tool (Vite, Webpack, Parcel). See our disclaimer for full terms.
Frequently Asked Questions
Does minification change the cascade?
No. The tool only removes comments, whitespace, trailing semicolons, and shortens hex codes. None of these affect the cascade or specificity. A minified stylesheet renders identically to its source. Aggressive minifiers (cssnano, clean-css) can rewrite shorthand values and merge rules, which can theoretically change behaviour in edge cases — this tool does not do those.
Can the tool merge duplicate rules?
No. If your stylesheet has <code>.btn { color: red; }</code> and later <code>.btn { color: blue; }</code>, both rules will be preserved in the minified output. Merging rules requires understanding cascade order, source order, specificity, and <code>@media</code> context — a job for a real CSS optimiser like cssnano. Split your CSS to remove duplicates manually before minifying.
Why doesn't the tool shorten 0.5rem to .5rem?
Actually, it does not, because the regex for that is risky: <code>0.5</code> is a number, but <code>0</code> can also be a unit (e.g. <code>transition-delay: 0s</code>). The micro-optimisation to drop the leading zero from numbers between -1 and 1 is conventional but requires the parser to distinguish a number token from a unit; this tool skips it for safety. Aggressive minifiers do it.
Will the tool strip my CSS custom properties (variables)?
No. Custom properties (CSS variables, e.g. <code>--emerald-700: #047857</code>) are preserved exactly. They are part of the cascade and may be overridden at runtime by JavaScript, so removing or renaming them would break pages.
How much size does minification save vs. gzip?
Minification saves 30–60% of the raw file size. Gzip on top of that saves another 70–85% by compressing repeated substrings. The two are complementary — a 100 KB stylesheet typically minifies to 40 KB and gzips to 8 KB. Always do both: serve pre-minified, pre-gzipped assets with <code>Content-Encoding: gzip</code>.
Is my CSS uploaded anywhere?
No. Minification runs entirely in the browser. Your styles, including any proprietary design tokens, never leave the device.
Last updated: September 9, 2026 · Author: HT99 Tools Editorial Team