Output appears here...Minify several CSS files
Add several files, put them in order, then process them all with the options above. Files stay in your browser.
How to use
Paste or upload your CSS
Paste rules into the Input pane, or click Upload .css to load a file, which is minified straight away. Try sample loads a short stylesheet with a license comment, calc() and a media query.
Pick options and click Minify
Leave Keep /*! license */ comments and Shorten hex colors ticked, or untick them. Click Minify, or tick Live mode. Below the panes you see the original and new size, the percent saved and a gzip estimate.
Copy, download or batch
Click Copy, or Download to save a .min.css file. For several files, use Minify several CSS files: add them, set the order, then download each one, a ZIP, or one combined bundle.min.css.
Why CSS Minifier
- Keeps the spaces CSS needs, inside calc(), min(), max() and clamp() and before pseudo-classes.
- Keeps /*! license comments and shortens hex colors, both optional.
- Batch mode: minify several files into a ZIP or one combined file.
- Shows bytes saved and a gzip estimate, all in your browser.
Before and after: what minifying changes
The sample stylesheet has a license comment, a normal comment, 2-space indentation, blank lines between rules and a media query. Minifying it keeps the /*! license line, then gives one line that starts .hero{padding:0 16px;width:calc(100% - 32px);background:#fff;... and ends with @media (max-width:600px){.hero h1{font-size:32px}}.
Look at what stayed. The space in calc(100% - 32px) is still there because calc() needs it. The space between @media and the opening bracket is kept. 0px became 0 in the padding, but a 0px inside calc() would stay as it is, because calc() requires a unit. #AABBCC became #abc, while #0a0a0a stayed, because its digit pairs differ.
| Change | Example before | Example after |
|---|---|---|
| Comments removed | /* Hero */ | (nothing) |
| Spaces around { } : ; , removed | .hero { padding: 16px; } | .hero{padding:16px} |
| Last semicolon in a rule dropped | margin: 0;} | margin:0} |
| Zero units shortened | padding: 0px 16px | padding:0 16px |
| Spaces kept where needed | calc(100% - 32px) | calc(100% - 32px) |
| Hex colors shortened (optional) | #ffffff and #AABBCC | #fff and #abc |
| License comments kept (optional) | /*! theme.css | MIT License */ | Kept on its own line |
Minifying CSS in build tools
If your site has a build step, let it minify CSS on every deploy and keep this page for one-off jobs and checks. Build tools also handle things this page does not, such as removing unused rules, adding vendor prefixes and writing source maps, so your browser's DevTools can still point to the original line.
Common setups:
- Vite minifies CSS in production builds by default, using esbuild unless you choose Lightning CSS.
- webpack needs css-minimizer-webpack-plugin added to optimization.minimizer.
- PostCSS setups usually add cssnano as the last plugin.
- Parcel minifies CSS with Lightning CSS in production builds.
- Next.js minifies CSS automatically when you run next build.
- WordPress sites typically rely on a caching or optimization plugin that minifies stylesheets on the fly.