Free Online CSS Minifier
Compress CSS by stripping whitespace, comments, and shortening values
Try these next
Why use CSS Minifier
- Before/after byte counts quantify the savings so you can decide whether it's worth the effort.
- Handles modern CSS features -- custom properties, container queries, @layer, @supports -- without breaking them.
- Shortens hex colors and strips trailing semicolons for tighter output than simple whitespace removal alone.
- No build-system setup. Paste, copy, ship.
- Proprietary stylesheets stay on your machine.
How it works
The minifier parses your CSS as a stream of tokens -selectors, declarations, values, comments, and whitespace. First, it strips all block comments (/* ... */) and inline whitespace characters (spaces, tabs, newlines) that are not semantically required by CSS syntax. Next, it removes whitespace around structural characters like colons, semicolons, braces, and commas, collapsing selector lists and declaration blocks to a single line. Trailing semicolons before closing braces are dropped because CSS parsers treat them as optional. Six-digit hex color values with repeating pairs are shortened to three digits (#ffffff becomes #fff). The output is a single continuous string that browsers parse identically to the original. File size statistics are computed by comparing UTF-8 byte lengths of the input and output strings.
About this tool
Paste a stylesheet, get a compact version with whitespace, comments, and unnecessary semicolons stripped. The tool also shortens color hex values (#ffffff to #fff) and removes trailing semicolons before closing braces. CSS is render-blocking -- the browser can't paint anything until every stylesheet in the critical path is downloaded and parsed. Shaving a few KB directly improves FCP and LCP, which influence search rankings. For quick one-off optimization this is faster than configuring PostCSS or cssnano in a build pipeline. Paste, copy, deploy. It handles modern CSS features including custom properties, container queries, @layer, @supports, and nested selectors without breaking them.
How to use CSS Minifier
- Paste your CSS. Drop the stylesheet -- full files, partials, or snippets -- into the input area.
- Check the compression stats. Original and minified byte counts appear alongside the percentage saved.
- Copy the minified output. Click Copy to grab the compact CSS for your deploy or theme upload.
Use cases
- A WordPress theme's stylesheet needs to shrink before it hits the CDN. Paste it in, copy the output, upload to production.
- A CMS imposes a character limit on its custom style field. Minify to fit under the cap without removing any rules.
- You're running Lighthouse audits and want to test whether removing whitespace and comments alone would push the performance score past a target threshold.
Frequently Asked Questions
CSS minification is the process of removing unnecessary characters from CSS code -including whitespace, line breaks, comments, and redundant semicolons -without changing the stylesheet's behavior. The result is a smaller file that browsers interpret identically but download faster.
CSS minification typically reduces file size by 15–40%, depending on the original formatting and comment density. Large frameworks like Bootstrap can see significant absolute savings. Combined with server-side compression (gzip/Brotli), total transfer size reductions can exceed 80%.
No. CSS minification only removes characters that do not affect how browsers parse and apply styles. Selectors, properties, values, and media queries remain functionally identical. However, if you rely on specific formatting in CSS content properties (e.g., whitespace in generated content), test those cases carefully.
Yes. CSS minification is a standard best practice for production websites. Build tools like PostCSS (cssnano), Webpack, and Vite include CSS minification plugins. This online tool is convenient for quick one-off tasks, email stylesheets, and projects without a build system.
Minification removes unnecessary characters while keeping all rules intact. CSS tree-shaking (or purging) removes entire unused rules -selectors that do not match any element in your HTML. Tools like PurgeCSS and Tailwind's built-in purge combine both techniques for maximum size reduction.
This online tool does not generate source maps. Source maps are typically generated by build tools during the minification process, mapping minified output back to original source lines for debugging. For production workflows with source maps, use cssnano or a similar build-tool plugin.
This tool processes standard CSS only. SCSS and LESS are preprocessor syntaxes that must first be compiled to CSS before minification. Compile your SCSS/LESS to CSS using their respective compilers, then paste the resulting CSS here for minification.
Yes. Smaller CSS files reduce render-blocking time, which directly improves First Contentful Paint (FCP) and Largest Contentful Paint (LCP) -two key Core Web Vitals metrics. Faster CSS delivery means the browser can start rendering visible content sooner, leading to a better user experience and potentially higher search rankings.
A basic minifier like this one removes whitespace, newlines, and comments, and may merge shorthand properties where the values are identical. It does not remove selectors, reorder rules, or change property values. Your styles will apply exactly as written -the output is semantically identical to the input.
No -this tool minifies standard CSS only. Paste the compiled CSS output from your preprocessor, not the source SCSS or Less files. Most build pipelines (Webpack, Vite, Parcel) already minify CSS during compilation, so this tool is most useful when you're working outside a build system.
Minification compresses the CSS you have by removing whitespace and comments, keeping every rule intact. Purging (used by tools like PurgeCSS) analyzes your HTML and removes CSS selectors that are never referenced in your markup. They address different problems: minification reduces file size, purging reduces dead code. For the biggest gains, do both.
Related Tools
Discover more free utilities to enhance your productivity.
HTML Minifier
Strip whitespace, comments, and redundant attributes from HTML
JavaScript Minifier
Strip whitespace and comments from JavaScript without changing behavior
CSS Gradient Generator
Build linear and radial CSS gradients with a visual editor
Hex to RGB Color Converter
Convert between hex, RGB, and HSL color codes