CSS Minifier with Before and After Byte Counts

What is a CSS minifier?

A CSS minifier strips everything a browser doesn't need to render your stylesheet: comments, indentation, line breaks, and redundant spaces around selectors and property values. None of that whitespace changes how the CSS behaves, but it does add bytes to every page load — and CSS is render-blocking, so a smaller file means the browser can build the render tree sooner.

This tool runs the transform entirely in your browser with a regex-based pass — no upload, no build step. Paste a stylesheet and get back the same rules with the formatting removed.

When to use it

Minify CSS before shipping to production when you don't already have a bundler (Vite, webpack, Next.js) doing it for you as part of the build — for example, a static site, an email template, or a `<style>` block injected at runtime. It's also useful when you need to paste CSS into a size-constrained field, such as a CMS custom-CSS box with a character limit, or when you want a quick gut-check on how much dead weight your comments and formatting are adding.

If your project already runs through a bundler, that pipeline typically also does more aggressive optimizations (merging duplicate rules, shortening color values) than this tool's whitespace-only pass — use this for one-off snippets, not as a replacement for a real build pipeline.

Example

Input:

.container { display: flex; /* center items */ align-items: center; }

Output: .container{display:flex;align-items:center} — the comment is gone, and every unnecessary space and the trailing semicolon before the closing brace are stripped, cutting this snippet from 78 bytes to 42.