CSS Minifier
Paste your CSS and get a minified version instantly. Removes comments, whitespace, and redundant characters. Nothing is uploaded — runs in your browser.
Minified CSS appears here…Comments removed
/* block */ and // inline
Whitespace stripped
Newlines, tabs, extra spaces
Redundant chars
Trailing semicolons before }
How the CSS Minifier Works
1. What This Tool Actually Does
This CSS minifier applies five text transformations, in order, to whatever stylesheet you paste in. It first strips any // line comments (a preprocessor-style convenience — plain CSS doesn't officially support them, but stripping them is harmless if present), then removes every /* block */ comment. Next it collapses every run of whitespace — spaces, tabs, and newlines — into a single space. It then removes the spaces that sit directly around the structural characters { } ; : , > ~ +, since those characters never need surrounding whitespace to parse correctly. Finally it deletes any semicolon that appears immediately before a closing brace, because CSS doesn't require a trailing semicolon on the last declaration in a rule.
What it deliberately does not do: reorder selectors, merge duplicate rules, shorten hex colors (e.g. #ffffff to #fff), or strip declarations it thinks are unused. It is a safe, structural minifier, not an optimizing compiler.
2. How to Use the CSS Minifier
- Paste your stylesheet into the Input CSS panel, or click Load Sample CSS to see it work on a real navigation stylesheet.
- The Minified Output panel updates on every keystroke — everything runs locally, with no network request.
- Watch the green savings pill for the exact byte count before and after, and the percentage reduction for your specific file.
- Click Copy and paste the result into your production stylesheet, a WordPress Customizer "Additional CSS" box, or your build pipeline.
3. Why CSS Minification Doesn't Change Rendering
A CSS parser tokenizes a stylesheet into selectors, declaration blocks, properties, and values — whitespace between those tokens exists purely for human readability and has no effect on how the cascade is computed or how styles apply to the DOM. Comments are metadata for developers and are discarded the moment the browser's CSS engine parses the file. Because this tool only removes bytes in positions where the CSS grammar treats whitespace as optional, the resulting stylesheet computes to the exact same set of rules, selectors, and declared values as the original — just represented with fewer characters.
The one place this matters is inside property values that contain meaningful internal spaces, such as shorthand properties like margin: 10px 20px or transition: color 0.2s. The tool's structural-character regex intentionally does not match ordinary spaces inside values — only whitespace immediately touching { } ; : , > ~ + — so multi-value shorthand properties keep their single separating space and remain valid.
4. A Real Example
Here is an actual rule from this tool's own sample stylesheet:
.nav-link {
color: #a9b2bc;
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
transition: color 0.2s;
}Running it through the minifier produces:
.nav-link{color:#a9b2bc;text-decoration:none;font-size:0.875rem;font-weight:500;transition:color 0.2s}Notice the space inside color 0.2s survives because it's part of the transition shorthand value, while every other space — around the brace, the colons, and the semicolons — is gone, along with the final trailing semicolon before the closing brace. The selector, every property name, and every value are byte-identical to the source.
5. Practical Use Cases
- WordPress Customizer "Additional CSS": Compact CSS pasted into the theme Customizer's custom CSS box is stored directly in the database and served on every page load — trimming it reduces what gets stored and output.
- Inline critical CSS blocks: When hand-writing a small above-the-fold critical CSS block to inline in
<head>, minifying it keeps the inlined HTML payload as small as possible. - One-off page-specific stylesheets: A campaign landing page or plugin-specific stylesheet that isn't part of a normal build pipeline can still be minified manually before upload.
- Quick before/after size checks: Paste an existing production stylesheet to see how much of its weight is comments and formatting versus actual rules.
6. Common Mistakes & Limitations
- Not a Sass/Less compiler: Paste compiled CSS, not
.scssor.lesssource — nesting, variables, and mixins are not processed. - No dead-code removal: This tool cannot tell which selectors actually match elements on your page. Combine it with a build-time purge step if you need to eliminate genuinely unused CSS.
- Diminishing returns on already-minified files: Running a production bundler's output (already comment-free and whitespace-stripped) through this tool again yields little to no additional savings.
- Version control friction: Minified CSS collapses onto very few lines, which makes diffs unreadable — keep an unminified source file as your working copy and minify only the deployed artifact.
Frequently Asked Questions
What does CSS minification do?
CSS minification removes comments, extra whitespace, newlines, and trailing semicolons to reduce the file size without changing how the styles render. Smaller CSS files parse faster and reduce page weight.
Is this safe to use on production CSS?
This tool applies safe, structural minification — removing whitespace and comments. It does not rearrange selectors or remove declarations. Always test minified output in a staging environment before deploying to production.
Does my CSS code get uploaded anywhere?
No. All minification runs in your browser using JavaScript string manipulation. Nothing is sent to any server.
How much will my CSS file shrink?
Savings vary with your coding style. Typical developer-written CSS with comments and generous whitespace often shrinks by 30–50%. Already-minified production CSS will see minimal additional gains.
Does this tool merge duplicate CSS rules or remove unused selectors?
No. This is a structural whitespace-and-comment minifier — it processes your CSS as text, not as a parsed stylesheet. It never merges duplicate selectors, reorders properties, shortens color values, or removes declarations that appear unused. For dead-code elimination you need a build-time tool that actually analyzes your rendered HTML against your CSS, such as PurgeCSS.
Can I minify SCSS or LESS files with this tool?
This tool expects plain CSS syntax. SCSS/LESS-specific features like nesting, variables (@variable or $variable), and mixins are not compiled — paste the compiled CSS output from your Sass/Less build step instead, not the source preprocessor file.
Will minifying break my CSS selectors or media queries?
No. The regex only targets comments and whitespace directly adjacent to structural characters ({ } ; : , > ~ +). Selectors, media query conditions, custom property names, and values are preserved exactly — only the formatting around them changes.