CSS Minifier
Minify your CSS code for production
Input CSS
Minified CSS
CSS Minification Examples
Formatted CSS is readable; minified CSS is compact for production. Example:
Container and button styles
Formatted input:
Minified output:
Use Sample above to load more example data.
What Is a CSS Minifier?
CSS files use whitespace, comments, and indentation for readability. In production, smaller files load faster. A CSS minifier removes unnecessary whitespace, comments, and shortens values where safe to reduce file size. The W3C CSS specifications define the language; minification preserves behavior while reducing bytes.
This tool parses your CSS and outputs a compact version. Minification runs entirely in your browser. Nothing is sent to a server. For formatting minified CSS, use the CSS Formatter. For validation, use the CSS Validator.
How to Use This Tool
Paste or Upload CSS
Copy your CSS and paste it into the left editor. You can also click Upload to load a .css file. The Sample button loads example data. Invalid CSS will show an error.
View the Minified Output
The right panel shows the compact CSS. Whitespace and comments are removed. The output is valid CSS—behavior is preserved. Invalid CSS will show an error in the output.
Copy or Download
Use Copy to put the result on your clipboard, or Download to save it. For SCSS or Less, compile first with SCSS to CSS or Less to CSS, then minify.
How the Minifier Works
The tool removes whitespace, newlines, and comments from your CSS. Values may be shortened where safe (e.g., 0px to 0, #ffffff to #fff). The output remains valid per the W3C CSS spec. Build tools like cssnano or PostCSS offer more aggressive optimization; this tool provides quick, browser-based minification.
When CSS Minification Helps
Production websites benefit from smaller CSS files. Minification reduces payload size, improves load times, and saves bandwidth. Build tools like Webpack, Vite, or Parcel often minify automatically, but this tool is useful for one-off files, quick checks, or when a build step isn't available.
Email templates, embedded styles, or CDN-hosted CSS often need manual minification. Running your stylesheet through here gives you production-ready output. For adding vendor prefixes before minifying, use the CSS Prefixer. For formatting minified CSS back to readable form, use CSS Formatter.
Frequently Asked Questions
Does minification break CSS?
No. Only whitespace and comments are removed. Selectors, properties, and values stay the same. The output is valid CSS. Some minifiers may shorten values (e.g. 0px to 0)—behavior is preserved.
Is my data private?
Yes. Minification runs entirely in your browser. No data is sent to any server.
What about source maps?
This tool does not generate source maps. For production builds with source maps, use a build tool like PostCSS, cssnano, or your bundler's minifier.
Does it support SCSS or Less?
This tool minifies plain CSS. For SCSS or Less, compile first using SCSS to CSS or Less to CSS, then minify the output.
How much smaller does it get?
Typically 20–40% smaller depending on whitespace and comments. Heavily commented or formatted CSS can see larger savings. The exact reduction depends on your input.
Related Tools
For the CSS specification, see W3C CSS. MDN CSS is the reference. cssnano and PostCSS offer advanced build-time minification.