CSS Minifier
Compress CSS.
Loading tool…
What is CSS minification?
CSS — Cascading Style Sheets — is the language that describes how a web page looks: colours, spacing, layout, typography, responsive behaviour. Written for humans, a stylesheet is full of indentation, blank lines, comments, and readable formatting, none of which a browser needs.
Minification removes everything that has no effect on rendering: whitespace between rules, comments, the final semicolon in a block, and unnecessary units on zero values. Shorthand rewrites go further, collapsing #ffffff to #fff and merging duplicate declarations. The output is unreadable to a person and identical to a browser, typically 20 to 40 per cent smaller — and smaller again after gzip, because CSS compresses well. Since stylesheets block rendering, that saving comes off your page's first paint directly.
Why we built this tool
Anyone shipping a site without a full build pipeline still needs minified CSS: a WordPress theme, a landing page, an email template, a static site assembled by hand, or a quick fix deployed straight to a server.
Stylesheets are less sensitive than most files, but they are unreleased work, and pasting a client's unpublished design into an unknown server is still a needless disclosure. Our minifier is written in JavaScript and runs in your tab, so the transformation happens on your device and no request leaves the page. That also removes the practical annoyances of online tools: there is no size cap, no queue, and it keeps working offline once loaded.
Tips and common mistakes
- Keep the readable source in version control and minify as a publishing step, never the other way round.
- Preserve licence comments if any of your CSS comes from a third-party library that requires attribution.
- Test a minified stylesheet with a hard refresh; a cached old file is the usual reason a change appears not to work.
- Enable gzip or Brotli on the server too — the savings compound and the server-side one is usually larger.
Open CSS Minifier with a link
CSS Minifier can be handed its input by the link that opens it, so the page arrives with the work already done. This is meant for assistants and scripts: if a chatbot, an editor extension, or a command-line agent already holds your content, it can build a link instead of asking you to copy and paste into a box.
The payload rides in the fragment — the part of a URL after the #. Browsers never send the fragment to a server, so anything handed over this way stays on your device exactly as a dropped file would. A link that uses the query string instead is rewritten into the fragment by the page before any analytics or ad script can read the address.
Prefix any field with gz — #gztext= — to pass it as gzip-compressed base64url, which fits roughly five to ten times more into the same link. Links stay reliable up to about 8,000 characters; past that, chat apps and address bars start truncating them, and the page says so rather than loading half a document.
One exception to the privacy rule: ?url= tells the page to download the input from an address. That request goes from your browser straight to that server — not through ours — but it does leave your device, and it only works if the server allows cross-origin requests.
With My Gadgets installed as an app, a .css file opened from your desktop lands straight in this tool. The file is read locally, exactly like a drop.
#text=— the text to work on
Example: https://mygadgets.ink/tools/css-minifier/#text=...
Quick start: using CSS Minifier
- Paste your stylesheet into the input above or load the .css file.
- Run the minifier and compare the original and minified byte counts.
- Copy the output into your production file — keep the readable version as your source.
- Deploy and hard-refresh to confirm nothing shifted visually.
- Enable gzip or Brotli on your server as well; the two savings compound.
Do the same for your scripts with JS Minifier and your markup with HTML Minifier.