Input CSS

Minified CSS

CSS Minification Examples

Formatted CSS is readable; minified CSS is compact for production. Example:

Container and button styles

Formatted input:

Input

Minified output:

Output

Use Sample above to load more example data.

What Is a CSS Minifier?

You've written clean, well-commented CSS — but before shipping to production, every unnecessary byte counts. Whitespace, newlines, comments, and verbose values all add up. A CSS minifier strips them out so the browser gets the smallest possible stylesheet without changing how it works. According to web.dev performance guidelines, smaller payloads directly improve load times and Core Web Vitals scores. The MDN CSS reference documents every property; tools like cssnano handle minification in build pipelines, but this tool does it instantly in your browser for one-off files, quick tests, or when you don't have a build step. The W3C CSS spec guarantees that minified CSS behaves identically to formatted CSS. Google's PageSpeed Insights will flag large unminified stylesheets — running your CSS through here before deploying is a simple fix.

Your stylesheet is squeezed down by script running in this tab; the CSS itself is never uploaded, so an unreleased theme or a client's brand styles can go through here without a second thought. For formatting minified CSS, use the CSS Formatter. For validation, use the CSS Validator.

How to Use This Tool

1

Paste or Upload CSS

Put your stylesheet in the left pane, either by pasting it or by opening a .css file with Upload. Sample gives you a commented stylesheet to try first. CSS the minifier cannot make sense of produces an error message.

2

View the Minified Output

The squeezed stylesheet lands on the right with its comments and spare whitespace gone. Selectors and declarations still mean exactly what they did, so the page renders the same. If the input could not be processed, the error message takes its place.

3

Copy or Download

Happy with it? Copy grabs the one-line stylesheet for pasting into a template or CDN upload, and Download saves it as a file. Working in a preprocessor? Turn it into plain CSS with SCSS to CSS or Less to CSS and bring the result back here.

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. The stylesheet is compressed locally in this browser tab and never leaves it.

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?

Only plain CSS. Nesting, variables and mixins have to be compiled away first: run the source through SCSS to CSS or Less to CSS first, and paste what it produces here.

How much will my stylesheet shrink?

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.