CSS Minifier
Paste CSS to remove comments and collapse whitespace so the file downloads faster. The minifier strips spaces around braces, colons, semicolons and commas and drops the last semicolon before each closing brace, while preserving the exact contents of quoted strings and url() values. It reports the original size, minified size and percent saved, and everything runs in your browser.
How to minify CSS
- Paste your CSS into the CSS editor, or click Load sample to try it.
- Read the compressed result in the Minified CSS box, which updates as you type.
- Check the Original, Minified and Saved figures below the output.
- Click Copy to copy the result, or Download to save it as styles.min.css.
Examples
Strip a comment and collapse whitespace
/* card */
.card {
color: red;
margin: 0;
}
.card{color:red;margin:0}Minify a two-rule stylesheet
/* Card component */
.card {
display: flex;
padding: 16px;
margin: 0 auto;
color: #1a1a1a;
}
.card:hover {
background: #f5f5f5;
}
.card{display:flex;padding:16px;margin:0 auto;color:#1a1a1a}.card:hover{background:#f5f5f5}Keep url() and string values exactly
.a { background: url( logo.png ); content: " x , y "; }.a{background:url( logo.png );content:" x , y "}Frequently asked questions
Is my CSS uploaded to a server?
No. Minification happens entirely in your browser with JavaScript, so your CSS never leaves your device and nothing is stored.
How does the minifier shrink my CSS?
It deletes comments, collapses every run of whitespace to a single space, then removes the spaces around braces, colons, semicolons and commas. Finally it drops the last semicolon directly before a closing brace, since it is redundant.
Will it break my content or url() values?
No. The text inside quoted strings and inside url() is swapped out before whitespace is collapsed and restored afterward untouched, so spacing in a content value or a file path with spaces stays exactly as you wrote it.
Does it keep the space in values like margin: 0 auto?
Yes. Only whitespace next to structural characters is removed. A meaningful space between two values, such as the one in 0 auto or in a shorthand font rule, is preserved because it is not adjacent to a brace, colon, semicolon or comma.
Does minified CSS still work the same?
Yes. Minification only removes characters that browsers ignore, so every selector, property and value keeps its meaning and the rendered page looks identical.
How much smaller will my file get?
It depends on how many comments and how much indentation you have. Heavily commented, nicely formatted stylesheets shrink the most. The tool shows the original size, the minified size and the exact percent saved.
How are the size figures calculated?
Sizes are measured in UTF-8 bytes, not characters, so multibyte content such as accented text or emoji in a comment or string is counted accurately. The saved percent is rounded to one decimal place.
Can I minify Sass, Less or nested CSS?
The tool works on plain CSS. It treats the text structurally rather than compiling it, so preprocessor syntax like variables or nesting should be compiled to CSS first, then minified here.
Can I reverse the minification later?
Not with this tool, since the removed whitespace and comments are gone for good. Keep your original source file and use a CSS formatter or beautifier if you need a readable version again.
Learn more
- How CSS minification works and what it safely removes
The passes a CSS minifier runs, why strings and url() must be protected, and how much smaller a stylesheet really gets.
Related tools
CSS Gradient Generator
Build linear and radial CSS gradients with a live preview. Pick colors, set the angle and copy ready-to-paste background code for your site.
JSON Formatter
Format, validate and minify JSON online. Pretty-print with custom indentation, sort keys and catch syntax errors. Runs in your browser.
.env to JSON
Convert a .env file to JSON, or JSON back to .env. Parses KEY=value lines, comments, quotes and export. Runs entirely in your browser.
ASCII Table
Full ASCII table for all 128 codes with decimal, hex, octal and binary values, character names and descriptions. Search by code, hex or character.
Aspect Ratio Box Generator
Generate CSS for a responsive aspect-ratio container. Use the modern aspect-ratio property or the padding-top fallback, then copy the ready code.
Aspect Ratio Calculator
Calculate aspect ratios fast. Enter a ratio like 16:9 and one dimension to get the other, or enter width and height to simplify the ratio.