CSS Minifier & Beautifier
Compress CSS for production or Beautify for readability (100% Client-side)
CSS Minifier & Beautifier Documentation
What is this tool?
CSS minification removes syntactically unnecessary characters from stylesheets without altering their behavior: whitespace between rules, newlines, CSS comments (/* ... */), redundant semicolons before closing braces, and optional quotes around certain values. The beautifier performs the reverse—reformatting concatenated or hand-minified CSS with consistent indentation and line breaks to restore readability for debugging and code review.
Key Features
- Whitespace and comment removal: strips all inter-rule whitespace, newlines, and /* */ CSS comments. Preserves content inside string literals (e.g., font-family: “Courier New”) and url() values. Retains /*! ... */ license-comment blocks when the “Preserve Comments” option is enabled.
- Selector and declaration compaction: collapses multiple spaces in selectors (div > span → div>span), removes the final semicolon before }, and normalizes 0px → 0, 0.5 → .5 for numeric values where safe.
- Configurable beautifier indent: output indentation with 2-space, 4-space, or tab indent; one rule per line with declarations on separate indented lines; preserves @media, @keyframes, and nested selector structure.
- CSS custom property (@property / --variable) awareness: does not compact var() expressions or calc() whitespace (collapsing spaces inside calc(2px + 3px) to calc(2px+3px) can break parsing in some browsers).
- File size delta display: shows original byte count, minified byte count, and compression percentage alongside the output; useful for quantifying the impact of CSS optimizations on page weight.
Common Use Cases
- Production build pipeline: integrate CSS minification as a post-processing step in Webpack (css-minimizer-webpack-plugin / CssMinimizerPlugin), Vite (built-in Lightning CSS), or Gulp (gulp-clean-css) to reduce the stylesheet payload delivered to browsers.
- Debugging minified third-party CSS: paste vendor-supplied minified CSS (e.g., Bootstrap 5 bootstrap.min.css, Tailwind output) into the beautifier to inspect rule structure, understand specificity chains, or locate override points.
- Legacy stylesheet cleanup: reformat hand-written CSS with inconsistent indentation and mixed quote styles before refactoring; the beautifier normalizes whitespace without altering selectors or property values.
- CDN / edge cache payload reduction: serving minified CSS reduces total transfer bytes and improves Largest Contentful Paint (LCP) scores; typically 20–50% reduction for non-pre-minified stylesheets.
How This Tool Processes CSS
Whitespace Removal
Removes all unnecessary spaces, line breaks, and tabs. CSS rules are condensed to a single line without affecting functionality. Example: `.btn { color: red; }` becomes `.btn{color:red;}`
Comment Stripping
Deletes all CSS comments (/* ... */) unless 'Preserve Comments' option is enabled. Important license comments using /*! ... */ syntax are typically preserved by most minifiers.
Redundant Character Removal
Eliminates unnecessary semicolons (last property in a rule), spaces around operators, and extra zeros (0.5 → .5). Shortens color codes (#ffffff → #fff).
Property Optimization
Removes spaces around braces, colons, and commas. Example: `margin: 10px 20px;` becomes `margin:10px 20px;`. Note: spaces are preserved in calc() and other functions where required.
File Size Impact
CSS minification typically achieves 20–50% file size reduction for hand-written stylesheets with standard comment density. Framework output (e.g., a full Tailwind CSS build before purging) that already uses single-line rules may see only 5–15% further reduction. Very comment-heavy developer stylesheets can achieve 40–60% reduction. Gzip compression on top of minification adds another 70–80% transfer-size reduction, making combined minify+gzip the standard production delivery approach.
| Scenario | Original | Minified | Reduction | Gzipped |
|---|---|---|---|---|
| Well-formatted CSS with comments | 50 KB | 25-30 KB | 40-50% | ~5-8 KB (85-90% total) |
| Already compact CSS with few comments | 30 KB | 24-27 KB | 10-20% | ~4-6 KB (80-85% total) |
| Heavily commented documentation CSS | 100 KB | 40-50 KB | 50-60% | ~8-12 KB (88-92% total) |
Related Tools
HTML Minifier & Beautifier
Compress or beautify HTML code, remove whitespace and comments to optimize file size, or format code for readability
JavaScript Minifier & Beautifier
Compress or beautify JavaScript code, remove whitespace and comments to optimize file size, or format code for readability
Color Picker & Converter
Convert colors between HEX, RGB, HSL, CMYK, YCbCr, Lab formats, generate color palettes, and check WCAG contrast
Color Palette Generator
Professional color palette generator with color mixing, gradient creation, color schemes, and export to CSS/SCSS/JSON formats
Image to Base64 Converter
Convert images to Base64 encoding, supporting PNG, JPG, GIF, SVG, WebP formats, generate Data URI and CSS backgrounds
Text Diff Checker
Compare differences between two texts or files with side-by-side highlighted view