How to Minify CSS
Every byte of CSS a browser downloads sits on the critical rendering path, blocking the page from painting until it arrives — so trimming a stylesheet is one of the cheapest performance wins available. Paste your CSS here and it's compressed immediately: comments removed, whitespace collapsed, redundant final semicolons dropped, six-digit hex colours shortened where they're equivalent, and zero values stripped of their pointless units. What makes this safe rather than merely aggressive is how the parser treats quoted content. Naive minifiers using plain regular expressions happily destroy a content property or a url() containing spaces or semicolons; this one isolates every string before touching whitespace, so what's inside quotes comes back exactly as you wrote it. Licence and attribution comments written with the conventional /*! marker are preserved too, which matters when you're bundling third-party code. The saving readout shows original size, output size and the percentage reduction as you type, so you can see the effect of each option. Beautify mode reverses the process for reading minified CSS you've inherited. Everything runs in your browser.
Paste your CSS
Drop in a stylesheet, or minified CSS you want expanded.
Pick the options
Choose minify or beautify and toggle the optimisations.
Copy or download
Take the result or save it as a .min.css file.
Why Minify CSS?
Render-blocking bytes
Browsers won't paint until the stylesheet arrives and parses. Smaller CSS means a faster first paint, which is exactly what Core Web Vitals measure and what visitors feel.
Compression still helps
Gzip and Brotli already shrink CSS, but minifying first removes content compression can't — comments and redundant tokens — so the compressed file is smaller again.
Common Use Cases
Ship a smaller stylesheet
Minify before deploying to cut render-blocking bytes.
Inline critical CSS
Compress above-the-fold styles for inlining in the head.
Read inherited CSS
Beautify a minified file so you can actually work with it.
Email templates
Shrink inline styles where every byte counts.
No build step
Minify by hand on a static site with no bundler.
Check a saving
See exactly how much a stylesheet can shrink before committing.
CMS theme files
Compress theme CSS before uploading to WordPress or similar.
Clean up formatting
Normalise messy hand-written CSS into a consistent shape.
Tips & Best Practices
Keep the readable source
Commit the unminified CSS and minify at deploy time, so version-control diffs stay meaningful.
Enable compression as well
Minification and Brotli or gzip are complementary — use both for the smallest transfer.
Mark licences with /*!
Only bang comments survive minification, so use that form for attribution you must keep.
Remove unused rules first
Deleting dead selectors saves far more than whitespace ever will.
Test after minifying
Load the minified file and check a few pages, especially anything using content or url() values.
Split large stylesheets
Loading only the CSS a page needs beats shipping one huge minified file.
Troubleshooting
My licence comment disappeared
Only comments starting with /*! are kept. Change /* to /*! and enable the licence option.
A content string looks different
It shouldn't — strings are protected during minification. Check the original, and report it if the text really changed.
The saving seems small
Already-tidy CSS has little whitespace to remove. The bigger wins come from deleting unused rules.
Beautify output isn't identical to my source
Beautify rebuilds formatting from the rules themselves, so it normalises rather than restoring your exact original layout.
Frequently Asked Questions
How do I minify CSS for free?
Paste your stylesheet above and the minified version appears instantly with a saving readout. Copy or download it — free, no signup.
Does minifying change how my CSS renders?
No. Every transformation is lossless — only bytes that don't affect rendering are removed.
Are my content strings safe?
Yes. Quoted strings and url() values are isolated before whitespace is touched, so their contents are never altered.
Will my licence comment survive?
Yes, if it starts with /*! and the licence option is on. Ordinary /* comments are removed.
What is hex shortening?
Six-digit colours where the pairs repeat collapse to three digits — #ffffff becomes #fff, which renders identically.
What does unit optimisation do?
It drops units from zero values and leading zeros from decimals, so 0px becomes 0 and 0.5em becomes .5em.
Can it beautify minified CSS?
Yes. Switch to beautify mode to expand compressed CSS back into readable, indented rules.
How much smaller will my CSS get?
Typically 20 to 40 percent for hand-written CSS. The live readout shows your exact saving.
Should I still use gzip?
Yes. Minification and compression work together — minify first, then let the server compress.
Is my CSS sent to a server?
No. Everything runs in your browser, so your stylesheets never leave your device.
Does it remove unused rules?
No. Detecting unused CSS requires analysing your HTML and JavaScript, which is a separate kind of tool.
Can I download the result?
Yes. Save it as a .min.css file, or copy it to your clipboard.
Does it handle media queries?
Yes. At-rules including media queries are minified correctly along with the rest.
What about CSS variables?
Custom properties are preserved exactly; only surrounding whitespace is removed.
Is there a size limit?
No fixed limit — large stylesheets minify comfortably in your browser.
Does it work offline?
Once the page has loaded it runs entirely in your browser, so it keeps working without a connection.
Does it work on phones?
Yes, in any modern browser on Windows, Mac, Android or iPhone with nothing to install.
Is this tool really free?
Completely free, forever — no account, no ads and no premium wall.
100% free · No signup · Processed in your browser · Data never sent
Last updated: August 2026 · FlipMyFormat CSS Minifier & Beautifier
Written and maintained by the FlipMyFormat team · Runs entirely in your browser