CSS Minifier
Minify and compress CSS code
Input & options
Quick presets & examples
Your inputs are never uploaded or stored.
Results
Enter your values to see the result.
About CSS Minifier Tool
Our free online CSS minifier compresses your CSS code by removing unnecessary whitespace, comments, and redundant declarations. From a single blog theme to a design system with thousands of rules, minifying CSS is one of the most effective ways to improve page load speed and overall site performance.
This CSS compression tool offers three minification levels -- Safe, Recommended, and Aggressive -- so you can balance between maximum file size reduction and code safety. The recommended preset removes comments, shortens hex colors, and optimizes values while keeping your stylesheet fully functional. The aggressive preset goes further by merging duplicate selectors for the smallest possible output.
Nothing is uploaded or stored, so your CSS code never leaves your device. Paste your CSS, choose the Safe, Recommended or Aggressive level, and get the minified code with its compression statistics.
Key Features
- Three minification presets: Safe, Recommended, and Aggressive compression levels
- Real-time auto-minification with debounced processing as you type
- Detailed compression statistics showing original size, minified size, bytes saved, and compression ratio
- Comment removal, whitespace optimization, and empty rule elimination
- Hex color shortening (e.g., #ffffff to #fff) and unit optimization (e.g., 0px to 0)
- Duplicate selector merging in aggressive mode for maximum compression
- CSS file upload support for processing existing stylesheets
- One-click copy to clipboard and download as .css file
- Before and after comparison view to verify output quality
- Built-in CSS syntax validation with bracket matching
How to Use the CSS Minifier
- Select a minification level: Choose Safe for basic whitespace removal, Recommended for balanced optimization, or Aggressive for maximum compression.
- Input your CSS: Paste your CSS code directly into the text area, upload a .css file, or click Load Sample to try a demo.
- Review the output: The tool automatically minifies your CSS and displays compression statistics including file size reduction percentage.
- Compare before and after: Use the side-by-side comparison view to verify that the minified output looks correct.
- Copy or download: Click the Copy button to copy minified CSS to your clipboard, or use Download to save as a .css file.
Use Cases
- Website performance optimization: Reduce CSS file sizes to improve page load times and Core Web Vitals scores.
- Production deployment: Minify stylesheets before deploying to production servers for faster delivery.
- Bandwidth reduction: Compress CSS to lower hosting bandwidth costs, especially for high-traffic sites.
- Mobile optimization: Smaller CSS files load faster on mobile networks, improving the user experience.
- SEO improvement: Faster page loads contribute to better search engine rankings and user engagement.
- Email template optimization: Minify inline CSS for HTML email templates to stay within size limits.
- Build pipeline integration: Quickly minify CSS when you need a one-off optimization outside your build tools.
Frequently Asked Questions
What is the difference between Safe, Recommended, and Aggressive modes?
Safe mode only removes whitespace. Recommended mode also removes comments, shortens hex colors, and optimizes values. Aggressive mode adds duplicate selector merging for maximum compression, which may alter rule order.
Will minification break my CSS?
Safe and Recommended modes preserve all your CSS rules and their order. Aggressive mode merges duplicate selectors, which could change specificity in rare cases. Always test your website after minification.
How much file size reduction can I expect?
Typical CSS minification reduces file sizes by 20-50%, depending on the original formatting. Heavily commented and well-formatted CSS files see the largest reductions.
Tips & Best Practices
- Always keep original files: Store unminified CSS in your source code repository and only minify for production deployment.
- Use source maps: Generate CSS source maps for debugging minified stylesheets in browser developer tools.
- Combine files first: Merge multiple CSS files into one before minifying to reduce HTTP requests and maximize compression.
- Enable server compression: Pair CSS minification with gzip or Brotli compression on your web server for the best results.
- Test thoroughly: Always verify your website layout and styling after applying minified CSS, especially with aggressive mode.
- Start with Recommended: The Recommended preset offers the best balance of safety and compression for most projects.