🎨 CSS Minifier - Compress and optimize CSS code

🎨
Characters: {{ cssInput.length }}
⚙️
⚡
📤
{{ result.minified }}
Characters: {{ result.minifiedSize }}
📊
Original Size:
{{ result.originalSize.toLocaleString() }} chars
Minified Size:
{{ result.minifiedSize.toLocaleString() }} chars
Savings:
{{ result.savings.toLocaleString() }} chars
Compression:
{{ result.compressionRatio }}%
Compression Ratio
💾
Original: ~{{ Math.round(result.originalSize / 1024 * 100) / 100 }} KB
Minified: ~{{ Math.round(result.minifiedSize / 1024 * 100) / 100 }} KB
Saved: ~{{ Math.round((result.originalSize - result.minifiedSize) / 1024 * 100) / 100 }} KB
💾
⚠️ {{ error }}

ℹ️ About CSS Minifier

CSS minification removes bytes that browsers do not need in production stylesheets while preserving the intended cascade. This tool strips comments, tightens whitespace around CSS separators, shortens repeated hex colors such as #ffffff to #fff, trims selected numeric forms, removes units from zero lengths, and reports the character and approximate KB savings.

Use it when you need a quick production copy of a stylesheet, want to compare the size impact of comments and formatting, or need a compact CSS snippet for an HTML email, documentation example, CMS field, or small static site. Keep the readable source file in version control and deploy the minified output only after testing the page in target browsers.

The CSS parser model is defined by the W3C CSS Syntax Module Level 3. Numeric values and units are covered by CSS Values and Units Module Level 4, and color notation is covered by CSS Color Module Level 4. Minification works inside those syntax rules: it can remove insignificant whitespace, but it must not change selectors, property names, values, or the order that affects the cascade.

Example: .card { margin: 0px; color: #ffffff; } can become .card{margin:0;color:#fff}. The shorter form is easier to transfer over the network, but the readable form is still better for editing and code review.

  • Whitespace cleanup: removes spaces around braces, colons, semicolons, commas, and common selector combinators where safe.
  • Comment removal: deletes block comments used for notes, banners, and disabled rules.
  • Color compression: shortens eligible 6-digit hex colors and a small set of named colors.
  • Unit compression: rewrites values like 0px to 0 and trims unnecessary zeroes in supported length units.
  • Cascade preservation: leaves declaration order and !important markers intact.

Limitations:

  • This is a lightweight minifier, not a full CSS validator or build pipeline.
  • It does not remove unused selectors, merge duplicate rules, resolve @import, add vendor prefixes, or generate source maps.
  • Review output carefully for complex stylesheets that contain data URLs, quoted strings, legacy browser hacks, or intentionally preserved comments such as license notices.
  • The page UI runs minification in the browser; using the API endpoint sends the stylesheet content to the server for processing.

API Usage Example:

POST /api/tools/webdev/css-minifier
Content-Type: application/json

{
    "css": "body { color: red; /* comment */ }",
    "removeComments": true,
    "removeWhitespace": true,
    "compressColors": true,
    "compressUnits": true,
    "preserveImportant": true,
    "optimizeSelectors": false
}
Ready