Loading…
Minify CSS for production by stripping whitespace. Alias view of css-formatter in minify mode; prefer css-formatter for full workflow. Input: CSS ≤10MB. Returns minified CSS. 100% client-side.
CSS Minifier is loading — interactive editor will appear here. Use examples below to try instantly once loaded.
Press ? for keyboard shortcuts
Minifies CSS with five configurable options: color compression (shortening #FF6600 to #f60), merging identical rules, merging adjacent identical selectors, removing unnecessary quotes, and clearing empty rules. Displays live size comparison with original vs minified byte count and percentage savings, plus side-by-side visual diff of before/after content.
CSS file size directly impacts page load performance. A dedicated minifier with granular control over optimizations lets developers balance compression ratio against readability for their specific deployment scenario.
This tool is part of the DevStackIO platform — a collection of free online developer tools from DevStackIO. Browse more free developer resources on DevStackIO.
Web performance engineers optimizing Core Web Vitals, frontend developers bundling assets for production, CMS developers minifying user-submitted CSS, and anyone deploying CSS to bandwidth-constrained environments.
Paste CSS or upload a .css file — minified output updates in real-time
Toggle options: 'Compress Colors', 'Merge Rules', 'Merge Adjacent', 'Remove Quotes', 'Clear Empty Rules'
Monitor the size comparison bar — updates with each toggle change
Review side-by-side diff view to see exactly what changed
Click 'Copy Minified' or 'Download' to save as .min.css
Use 'Copy Stats' to copy size comparison data for reporting
Input: 'a { color: #ff6600; background: #ffffff; }' | Compress Colors ON => Output: 'a{color:#f60;background:#fff}'Input: '.foo { color: red; } .bar { color: red; }' | Merge Rules ON => Output: '.foo,.bar{color:red}'Typical compression ratio?
60-70% of original size. With gzip, 70-80% total.
Does color compression change appearance?
No. #FF6600 and #f60 are identical in every browser.
Can I reverse minification?
No, it's lossy for formatting. Use CSS Formatter to beautify but comments are lost.
Does this handle @import and url()?
Yes, preserves them. 'Remove Quotes' strips unnecessary url() quotes.
Authoritative specifications, standards, and in-depth reading for CSS Minifier.
Format or minify CSS with indentation control. Use as default CSS tool handling both directions; css-minifier URL is a noindex alias. Input: CSS ≤10MB. Returns formatted or minified CSS. 100% client-side.
Free online JSON formatter and validator with syntax highlighting and error line numbers. Use as default for beautify+validate+minify in one place; for two-file comparison use json-diff, for schema generation use json-schema-generator. Input: JSON ≤10MB. Returns formatted JSON or line-numbered error. 100% private.
Format and validate HTML with indentation and error reporting. Use as default HTML tool; for minifying production HTML use html-minifier, for converting HTML to Markdown use html-to-markdown. Input: HTML ≤10MB. Returns formatted HTML or validation errors. 100% client-side.
Minify JS for production or beautify minified JS for debugging. Use for JS only; for JSON use json-formatter, for CSS use css-formatter. Input: JS text ≤10MB. Returns minified or beautified JS or syntax error. 100% client-side.
Free online SQL formatter with indentation and keyword casing. Format queries privately in browser.
Format and validate XML with indentation and well-formedness checks. Use for XML; for JSON use json-formatter, for XML to JSON conversion use xml-to-json. Input: XML ≤10MB. Returns formatted XML or line-numbered error. 100% client-side.
Format and validate YAML with syntax checks. Use for YAML editing; for JSON to YAML conversion use json-to-yaml, for TOML/YAML/JSON cross-conversion use toml-converter. Input: YAML ≤10MB. Returns formatted YAML or error. 100% client-side.
Analyze text for word count, readability, and language stats. Paste and get instant insights.