Skip to content

CSS Minifier

Minify CSS instantly online. Reduce file size, remove comments and whitespace, track savings with live stats.

Updated

What is the CSS Minifier?

CSS Minifier instantly compresses your CSS code by removing whitespace, comments, and unnecessary characters while preserving full functionality.

Get real-time size reduction stats, percentage savings, and a beautified version of your code. Perfect for developers optimizing website performance, reducing load times, and improving Core Web Vitals.

Works entirely in your browser — no data leaves your device. Supports modern CSS including variables, calc(), and media queries.

How it works

  1. Paste or type your CSS — The tool processes it live as you edit.

  2. Minification Engine — A robust regex-based processor:

  • Removes all comments (/* ... */)
  • Eliminates unnecessary whitespace and newlines
  • Strips trailing semicolons before closing braces
  • Optimizes spacing around selectors, properties, and values

  1. Live Statistics — Instantly see original size, minified size, bytes saved, and percentage reduction.

  2. Beautify Toggle — Switch between the compressed version and a cleanly formatted, indented version for review.

  3. One-click Copy — Copy minified or beautified CSS directly to clipboard.

The entire process runs client-side using pure JavaScript for maximum privacy and speed.

Examples

Basic CSS Minification

Compress a simple stylesheet by removing unnecessary characters.

body {
  color: blue;
  font-size: 16px;
  /* This is a comment */
  margin: 0 10px 0 10px;
}
 
body{color:blue;font-size:16px;margin:0 10px}

Complex Stylesheet Optimization

Process a full component stylesheet with media queries and selectors.

.card {
  background: white;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  padding: 1.5rem;
}

@media (max-width: 640px) {
  .card {
    padding: 1rem;
  }
}
 
.card{background:white;box-shadow:0 4px 6px rgba(0,0,0,.1);padding:1.5rem}@media(max-width:640px){.card{padding:1rem}}

Frequently asked questions

How do I use the CSS Minifier?

Paste your CSS code into the input textarea. The minified version appears instantly on the right along with detailed size statistics. Use the toggle to view the beautified version.

Does minifying CSS affect how my website looks?

No. Minification removes only whitespace, comments, and redundant characters. The browser interprets the CSS exactly the same way, so visual appearance remains unchanged.

What kind of savings can I expect?

Typical savings range from 30% to 60% depending on your original code style. Well-commented and indented stylesheets often achieve higher reductions.

Is my CSS data private and secure?

Yes. Everything runs 100% in your browser. No code is sent to any server, and nothing is stored.

Does it support modern CSS features like variables and calc()?

Yes. The minifier is designed to safely handle modern CSS syntax including custom properties, calc(), clamp(), media queries, and more.

Can I upload a .css file?

Currently the tool works with pasted text. You can open your .css file, copy the contents, and paste them here for instant minification.

What is the difference between minified and beautified views?

Minified removes all unnecessary characters for production use. Beautified reformats the code with proper indentation and spacing for easy reading and debugging.

Why should I minify my CSS?

Minifying reduces file size, leading to faster page loads, lower bandwidth usage, and better SEO performance scores. It's a simple but effective performance optimization step.

Related tools

More utilities you might find handy.

CSS

Box Model Visualizer

Interactive CSS box model visualizer with real-time editing of margin, border, padding, and content dimensions
CSS

CSS Animation Generator

Generate CSS keyframe animation code
CSS

CSS Button Generator

Design and generate custom CSS button styles with live preview and instant code export.