CSS Minifier
Free online CSS minifier and CSS compressor that shrinks your stylesheets by up to 60%. Removes whitespace, comments and unnecessary characters without changing how your CSS behaves. Choose whether to keep license comments, then copy or download the minified file ready to ship. Runs entirely in your browser — no signup, no uploads.
Paste Your CSS
Readable CSS in, tiny CSS outCtrl+Enter (or Cmd+Enter) inside the textarea to minify instantly. Use "Aggressive" mode for the smallest possible output.
Output
Ready when you areYour minified CSS will appear here
Paste some CSS and click Minify CSS to shrink it.
What does this CSS Minifier do?
This free online CSS minifier (also called a CSS compressor) removes every byte that a browser does not need: whitespace, line breaks, indentation, redundant semicolons, and regular comments. The result is a much smaller stylesheet that behaves exactly the same in the browser but downloads faster and improves your PageSpeed score.
Minification is one of the easiest performance wins for any website. A typical hand-written CSS file loses 20–40% of its size the moment you minify it, and files that carry a lot of comments and indentation can shrink by 60% or more. For high-traffic sites, that translates into real savings on bandwidth and real improvements in Core Web Vitals.
The tool has a few sensible options so you can control exactly what happens. You can preserve important comments (the ones starting with /*!) — this is the convention for license headers and legal notices. You can strip the last semicolon from each rule since it is optional in CSS. And you can switch to aggressive mode if you want the absolute smallest output possible, regardless of readability.
Everything runs locally in your browser. The CSS you paste never leaves your device, there is no signup, and there are no usage limits. Minify as much CSS as you want, as many times as you want, for personal or commercial projects.
How to minify CSS code
- Paste your CSS into the input box on the left. Any readable stylesheet works — hand-written, exported from a design tool, or the output of a Sass/Less build.
- Choose your options. Keep important comments on if your file has license headers. Remove last semicolon if you want a tiny extra saving. Aggressive mode strips everything it can.
- Click Minify CSS. The tool rewrites your stylesheet as a compact single-line form and shows the result on the right.
- Check the savings. The stats panel shows your input size, output size, bytes saved, reduction percentage, and the number of rules in the output.
- Copy or download. Use Copy Output to grab the minified CSS, or Download .min.css to save it with the conventional filename suffix.
Why use this CSS Minifier?
Instant compression
Minification happens in your browser the moment you click. No server round-trip, no waiting, no upload limits.
Configurable
Keep important comments, strip the last semicolon from each rule, or go full aggressive for maximum compression.
Live stats
See input size, output size, bytes saved and reduction percentage — all updated the moment you minify.
CSS-aware
Uses a tokenizer that understands strings, comments and nested braces, so it does not corrupt your styles.
100% private
Everything runs locally. The CSS you paste never leaves your device — no server, no logs, no tracking.
Works offline
Once the page loads, you can minify CSS without an internet connection. Bookmark it for offline work.
What exactly gets removed?
Here is a complete list of what the minifier strips out and what it preserves, so you know exactly what to expect.
| Element | Default behaviour | Notes |
|---|---|---|
| Whitespace & line breaks | Removed | Spaces, tabs, newlines between selectors and declarations |
Regular comments (/* ... */) | Removed | They have no effect on rendering |
Important comments (/*! ... */) | Preserved (toggleable) | Convention for license and legal headers |
| Last semicolon in a rule | Removed | Optional in CSS; removes 1 byte per rule |
Space before { | Removed | .btn { becomes .btn{ |
Space after : | Removed | color: red becomes color:red |
Space around , | Removed | a, b, c becomes a,b,c |
| Quoted strings | Preserved | Content inside '...' and "..." is never touched |
| URLs and values | Preserved | Function calls, media queries and selector text are kept intact |
If you need the smallest possible file, enable Aggressive mode as well — it collapses every remaining whitespace run and removes whatever else it safely can.
Who uses a CSS minifier?
Anyone who ships a website or web app cares about CSS size. Here are the most common use cases:
Front-end developers
- Minify CSS before deploying to production, either as a one-off or as part of the build pipeline
- Quickly shrink an inline stylesheet embedded in a single HTML file
- Compare input and output byte counts to report compression savings to the team
- Strip leftover comments from a stylesheet that was shared by a contractor
SEO and performance engineers
- Reduce CSS file size to improve Largest Contentful Paint (LCP) and overall PageSpeed score
- Trim render-blocking CSS on the critical path so above-the-fold content paints sooner
- Audit large third-party stylesheets before deciding whether to keep them
No-code and CMS users
- Minify custom CSS injected through a website builder or theme settings
- Clean up exported CSS from a design tool before pasting it into a live site
Students and learners
- See how much whitespace and comments contribute to file size
- Understand the practical difference between beautified and minified CSS
CSS minify vs. CSS beautify — what is the difference?
These two operations are opposites, and each has its own job.
| Mode | What it does | Best for | Typical size change |
|---|---|---|---|
| Minify (this page) | Removes whitespace, comments and unnecessary characters. Collapses CSS to a single line. | Production deployment, performance optimisation, bandwidth savings | 20–60% smaller |
| Beautify / Format | Adds indentation, line breaks and spacing. Expands compact CSS into a readable structure. | Development, debugging, code review, learning | Larger (adds whitespace back) |
For a two-way workflow, use our CSS Formatter to beautify your stylesheets, then this CSS Minifier to ship them to production. Both tools use the same CSS-aware tokenizer, so a round-trip through them preserves the original stylesheet exactly.
CSS minification best practices
Here are a few things to keep in mind so your minified CSS stays healthy in production:
- Always keep the source file. Minified CSS is very hard to edit by hand. Keep your original readable file in version control and minify as a build step.
- Enable gzip or brotli on your server. Minification and gzip work best together — the minifier strips the content, the server compresses the remaining bytes.
- Preserve important comments. If your stylesheet includes a license header, keep
/*! ... */comments so the license survives minification. - Use cache-busting filenames. Name your minified file
styles.min.cssand add a content hash when serving so browsers do not serve stale CSS. - Do not edit the minified file directly. If you need to change something, edit the source and re-minify. Otherwise you will quickly end up with two divergent versions.
- Check after each major change. If your site uses unusual CSS features (custom properties, complex media queries), spot-check the minified output to be sure nothing was altered.