Cómo usar: CSS Minifier
- Paste your CSS, drop a
.cssfile onto the input, or click Sample. - Leave the optimizations on (all are safe) or untick any you don’t want.
- Check the savings below the editor, then Copy or Download
styles.min.css. - Need to read a minified file instead? Switch to Beautify.
What is CSS minification?
CSS minification removes every byte the browser doesn’t need — comments, indentation, line breaks, the last semicolon in each rule — and rewrites some values into shorter equivalents. The resulting stylesheet is functionally identical but smaller, so it downloads and parses faster. Because CSS is render-blocking, a smaller stylesheet can directly improve First Contentful Paint and Largest Contentful Paint.
What this minifier changes
| Optimization | Before | After |
|---|---|---|
| Comments & whitespace | /* Buttons */ .btn , .link { … } | .btn,.link{…} |
| Last semicolon | {color:red;} | {color:red} |
| Colors | #FFFFFF, #aabbccdd | #fff, #abcd |
| Zero units | margin:0px 0em | margin:0 0 |
| Numbers | 0.50rem, 1.0 | .5rem, 1 |
| Empty rules | .unused{} | (removed) |
Why it is safe
Aggressive minifiers sometimes break stylesheets. This one only applies transformations that can’t change behavior:
- Strings,
url()values and escaped characters are protected and never modified. - Units are only dropped on lengths —
0s,0degand0%keep theirs (transition: 0sand keyframe selectors need them), and nothing insidecalc(),min()orclamp()is touched becausecalc(0 + 10px)is invalid. - The
flexshorthand is skipped (flex: 1 1 0pxandflex: 1 1 0are not always equal in older engines), and custom property values only lose redundant spaces. - Whitespace in selectors is kept where it means something:
a :hover(any hovered descendant) differs froma:hover. @layer name {}is kept even when empty, because it declares layer order. License comments starting with/*!are preserved by default.
Minification vs. compression
Minifying and gzip/Brotli compression stack. Compression removes repetition; minification removes bytes compression can’t, such as comments. The Gzipped output figure shows roughly what will travel over the network if your server compresses responses (most do). For the biggest win, also remove unused rules with a tool like PurgeCSS, and inline only the critical CSS for above-the-fold content.
Want to inspect a minified file? Use Beautify mode here or the CSS Formatter. Checking a whole page’s performance? Run a page speed test.
También se busca como: minify css, css compressor, compress css, css optimizer, reduce css size, css minify online, cssnano alternative, css uglify.
Herramientas que combinan con: CSS Minifier
- HTML Formatter — Paste minified or messy markup and get clean, consistently indented HTML — including embedded <style> and <script> blocks.
- JavaScript Formatter — Unminify and pretty-print JavaScript, JSON or JSX with your preferred indentation and brace style — or strip whitespace and comments with a verified minifier.
- Compresor de imágenes — Reduce el tamaño de las fotos y los gráficos entre un 50 % y un 90 % sin que se note ninguna pérdida de calidad.
- SQL Formatter — Paste a query — or a whole migration — and get readable SQL with one clause per line, aligned joins and consistent keyword case, using the grammar of your database.
Preguntas frecuentes
Can minifying break my CSS?
calc()). If your original CSS has a syntax error, the error stays in the output, so validate CSS that behaves strangely.How much smaller will my CSS get?
Should I still use gzip or Brotli?
Why are some comments kept?
/*! conventionally contain license notices that must stay with the code. Untick “Keep /*! license */ comments” to remove them too.