Development Tools
CSS Minifier — Compress Colors, Decimals & Whitespace
Minify CSS free with comment removal, whitespace stripping, hex color shortening, and decimal optimization. See byte-based savings instantly.
TL;DR: Paste CSS, click Minify CSS, and get comments removed, whitespace collapsed, redundant semicolons cleaned up, 6-digit hex colors shortened where possible (like #ffffff to #fff), and decimal values trimmed (0.8 to .8) — with byte-based before/after savings shown.
Reviewed by FYN Tools Editorial · Guides ·
Privacy & processing: 100% client-side browser processing — minification runs locally using pattern-based text replacement, with no server upload.
CSS Minifier
Minify CSS free with comment removal, whitespace stripping, hex color shortening, and decimal optimization. See byte-based savings instantly.
- Inputs
- CSS source code as plain text
- Outputs
- Minified CSS with comments, whitespace, redundant semicolons removed, hex colors shortened where compressible, and decimals trimmed, plus byte-based before/after size savings
- Processing
- Client-side (browser)
- Limits
- Hex color shortening only applies to 6-digit hex codes where each channel pair is identical (like #ffffff); it does not process CSS preprocessor syntax (Sass/Less variables, nesting) beyond plain CSS
Quick steps
- Paste your CSS code into the Input CSS box.
- Click Minify CSS.
- Review the Minified CSS output panel.
- Check the toast notification for the byte-based size reduction percentage and before/after byte counts.
- Click the copy button to copy the minified CSS.
- Removes comments and unnecessary whitespace
- Optimizes CSS properties and values
- Shows compression statistics
- One-click copy functionality
- Preserves CSS functionality
- Reduces file size significantly
Data input / output
| Inputs | CSS source code as plain text |
|---|---|
| Outputs | Minified CSS with comments, whitespace, redundant semicolons removed, hex colors shortened where compressible, and decimals trimmed, plus byte-based before/after size savings |
| Formats | Plain text CSS |
| Limits | Hex color shortening only applies to 6-digit hex codes where each channel pair is identical (like #ffffff); it does not process CSS preprocessor syntax (Sass/Less variables, nesting) beyond plain CSS |
| Processing | Client-side (browser) |
How to Use the CSS Minifier
- Paste your CSS code into the Input CSS box.
- Click Minify CSS.
- Review the Minified CSS output panel.
- Check the toast notification for the byte-based size reduction percentage and before/after byte counts.
- Click the copy button to copy the minified CSS.
What is a CSS Minifier?
This minifier does more than strip whitespace: after removing comments and collapsing spacing around selectors, braces, and punctuation, it specifically shortens compressible 6-digit hex colors (turning #ffffff into #fff, or #112233 into #123, when each channel’s two digits match) and cleans up rgb()/rgba() values by removing internal spaces and trimming leading zeros from decimals (0.8 becomes .8). It also removes the semicolon immediately before a closing brace and collapses any redundant repeated semicolons.
Byte-based savings (measured via Blob size, which accounts for actual UTF-8 encoding) are shown after minification, giving a more accurate size comparison than a simple character count would for CSS containing non-ASCII characters like custom font names or content strings. If the more advanced optimization pass encounters unexpected syntax and throws an error, the tool automatically falls back to a simpler whitespace-and-comment-only minification pass so you still get usable output.
Beyond basic whitespace removal, real-world CSS size savings often come from small, safe transformations like hex color shortening and decimal trimming, since these patterns appear frequently across stylesheets (many colors are pure grayscale or web-safe values, and opacity/transform values are commonly written with a leading zero). This tool targets exactly those safe, well-defined transformations rather than attempting riskier optimizations like selector merging or property shorthand consolidation.
How it works
CSS Minifier reads your input from the panel above, applies removes comments and unnecessary whitespace, and shows a result you can copy or download. Options stay visible so you can iterate without reloading the page.
Explore more tools on our site.
Common Use Cases & Examples
- Pre-deployment CSS compression: Minify a stylesheet before deployment to reduce page weight when a full build-tool pipeline is not set up.
- Hex color and decimal cleanup: Automatically shorten grayscale hex colors and trim leading-zero decimals across an entire stylesheet in one pass.
- Inline style block compression: Minify a small inline <style> block before embedding it directly in an HTML email or landing page.
Input / Output Examples
Input
Original string or number
Output
Output in the target encoding or unit
Frequently Asked Questions
What does CSS minification do?+
CSS minification removes unnecessary characters like whitespace, comments, and line breaks from your stylesheets, reducing file size and improving website loading speed without affecting functionality.
How much can I reduce my CSS file size?+
File size reduction varies depending on your CSS structure and comments. Typically, you can expect 20-60% reduction, with well-commented and formatted CSS seeing larger reductions.
Will minification affect my CSS functionality?+
No, our CSS minifier only removes unnecessary characters and whitespace while preserving all CSS rules and properties. Your styles will work exactly the same.
Should I minify CSS for production websites?+
Yes, minifying CSS for production is a best practice for web performance. It reduces bandwidth usage and improves page loading speed, especially important for mobile users.
Can I minify CSS with media queries and animations?+
Yes, our minifier handles all CSS features including media queries, animations, keyframes, and modern CSS properties while maintaining their functionality.
Key Features
- Removes comments and unnecessary whitespace
- Optimizes CSS properties and values
- Shows compression statistics
- One-click copy functionality
- Preserves CSS functionality
- Reduces file size significantly
Benefits
Achieve meaningful CSS size reduction without a full build tool setup.
Clean up verbose hand-written color and decimal values automatically.
Get an accurate byte-based measurement of your actual size savings.
When to Use CSS Minifier
- Reducing CSS file size before deployment without a full build pipeline
- Cleaning up hand-written CSS with verbose hex colors and decimal values
- Quickly compressing a small stylesheet or inline style block
- Checking how much byte savings basic CSS optimization can achieve before investing in more advanced tooling
Advantages
- Hex color shortening for compressible grayscale-style colors
- Decimal and rgb()/rgba() value optimization beyond basic whitespace removal
- Byte-accurate before/after size comparison via Blob size
- Automatic fallback minification if advanced optimization encounters an error
Tips
- Check the toast notification after minifying for the exact byte-based savings percentage and byte counts.
- Keep an unminified copy of your source CSS in version control, and use the minified output only for the deployed/served version.
- If minification throws an error on unusual syntax, the tool automatically falls back to a simpler whitespace-only pass so you still get usable output.
Common Mistakes
Expecting 8-digit hex colors with alpha channels or non-matching-pair hex codes (like #a1b2c3) to shorten — only fully compressible pairs like #ffffff to #fff are converted.
Assuming this handles Sass or Less preprocessor syntax — it processes plain CSS, not preprocessor-specific variables or nesting.
Losing track of which file is the source and which is minified when copy-pasting output back over your original stylesheet.
Summary
Paste your CSS above and click Minify CSS to strip comments and whitespace, shorten compressible hex colors, and trim decimal values — with byte-accurate savings shown so you know exactly how much smaller your stylesheet got.