Free tool

CSS minifier

Minify CSS by stripping comments, collapsing whitespace and removing unnecessary semicolons. Reduces file size for faster page loads.

Paste CSS

Minified

minified

css

No output yet

What is CSS Minifier?

A CSS minifier compresses your stylesheet code by removing all characters that are not required for the browser to correctly parse and apply your styles. This includes stripping CSS comments (/* */), collapsing multiple whitespace characters into zero, removing spaces around selectors, colons, and semicolons, and eliminating the trailing semicolon before each closing brace. The result is the most compact valid CSS representation of your stylesheet, which loads faster and consumes less bandwidth. CSS file size directly impacts render-blocking time — browsers must download and parse all CSS before painting the first pixel of your page. Reducing CSS payload improves First Contentful Paint (FCP) and Largest Contentful Paint (LCP), two Core Web Vitals that affect both user experience and Google search rankings. This tool shows you the exact before-and-after character count and percentage savings so you can quantify the optimization. All minification runs in your browser using JavaScript string operations, so your CSS never leaves your machine. It handles standard CSS including complex selectors, media queries, custom properties, keyframe animations, and vendor-prefixed properties.

How to Use CSS Minifier

1
Paste your CSS
Copy your stylesheet from your code editor, build output, or browser DevTools and paste it into the input area. The tool accepts any valid CSS including media queries, animations, and custom properties.
2
Check the size savings
The tool instantly displays the original character count, the minified count, and the percentage reduction. Typical stylesheets with comments and indentation see 20-40% savings.
3
Copy the minified CSS
Click Copy to place the compressed CSS on your clipboard. Use it in your production build, inline in HTML, or deploy it to your CDN for the fastest possible stylesheet delivery.

Features

Strips all CSS comments (/* */) for cleaner output
Collapses whitespace and removes unnecessary spaces
Removes trailing semicolons before closing braces
Live before/after character count with savings percentage
Handles media queries, keyframes, and custom properties
Private browser-only processing — no data uploaded

Related Tools

JSON Formatter & Validator

Pretty-print and validate JSON with 2 / 4 space indentation.

Open tool

JSON to CSV Converter

Convert JSON arrays to CSV format. Auto-detects columns, proper escaping, download as .csv.

Open tool

CSV to JSON Converter

Convert CSV data to a JSON array of objects. Handles quoted fields and commas.

Open tool

HTML Formatter & Minifier

Beautify messy HTML with proper indentation or minify it for production.

Open tool

HTML Minifier

Minify HTML by stripping comments, collapsing whitespace. Shows size savings.

Open tool

CSS Formatter & Minifier

Beautify CSS with proper indentation or minify it for production. Strips comments.

Open tool

See all Developer tools

Frequently Asked Questions

Will CSS minification break my styles?+

No. Minification only removes whitespace, comments, and redundant semicolons. All selectors, properties, values, and their specificity remain identical, so your page renders exactly the same.

What is the typical size reduction from CSS minification?+

Well-formatted CSS with comments typically reduces by 20-40%. Already compact CSS may only save 5-15%. The tool shows exact numbers so you can measure the impact for your specific stylesheet.

Should I minify CSS for development too?+

No. Keep formatted, commented CSS for development and debugging. Only use minified CSS for production builds. Most build tools (Webpack, Vite, PostCSS) can automate this step in your pipeline.

Does it handle CSS custom properties (variables)?+

Yes. CSS custom properties like --primary-color: #333 are preserved exactly as written. Only whitespace and comments are removed, so variable declarations and var() references work correctly.

Can I minify Tailwind CSS output with this tool?+

Yes. Paste the compiled CSS output from Tailwind and this tool will minify it further. However, Tailwind's build process already minifies in production mode, so additional savings may be small.

Is removing the trailing semicolon safe?+

Yes. The CSS specification does not require a semicolon before the closing brace of a declaration block. Removing it saves one byte per rule and all browsers handle it correctly.

What is CSS Minifier?

How to Use CSS Minifier

Paste your CSS

Copy your stylesheet from your code editor, build output, or browser DevTools and paste it into the input area. The tool accepts any valid CSS including media queries, animations, and custom properties.

Check the size savings

The tool instantly displays the original character count, the minified count, and the percentage reduction. Typical stylesheets with comments and indentation see 20-40% savings.

Copy the minified CSS

Click Copy to place the compressed CSS on your clipboard. Use it in your production build, inline in HTML, or deploy it to your CDN for the fastest possible stylesheet delivery.

Features

Strips all CSS comments (/* */) for cleaner output

Collapses whitespace and removes unnecessary spaces

Removes trailing semicolons before closing braces

Live before/after character count with savings percentage

Handles media queries, keyframes, and custom properties

Private browser-only processing — no data uploaded

Frequently Asked Questions

Will CSS minification break my styles?+

No. Minification only removes whitespace, comments, and redundant semicolons. All selectors, properties, values, and their specificity remain identical, so your page renders exactly the same.

What is the typical size reduction from CSS minification?+

Well-formatted CSS with comments typically reduces by 20-40%. Already compact CSS may only save 5-15%. The tool shows exact numbers so you can measure the impact for your specific stylesheet.

Should I minify CSS for development too?+

No. Keep formatted, commented CSS for development and debugging. Only use minified CSS for production builds. Most build tools (Webpack, Vite, PostCSS) can automate this step in your pipeline.

Does it handle CSS custom properties (variables)?+

Yes. CSS custom properties like --primary-color: #333 are preserved exactly as written. Only whitespace and comments are removed, so variable declarations and var() references work correctly.

Can I minify Tailwind CSS output with this tool?+

Yes. Paste the compiled CSS output from Tailwind and this tool will minify it further. However, Tailwind's build process already minifies in production mode, so additional savings may be small.

Is removing the trailing semicolon safe?+

Yes. The CSS specification does not require a semicolon before the closing brace of a declaration block. Removing it saves one byte per rule and all browsers handle it correctly.