Developer Tools
CSS Minifier
Minify CSS in your browser. Strip comments, collapse whitespace, shorten hex colors, drop zero units, and see exact byte savings.
CSS minifier
Optimization options
Your CSS is minified entirely on your device. Nothing is uploaded.
How to use
- Paste your CSS into the input on the left, or click Load sample to try the minifier with a realistic stylesheet.
- Read the minified output on the right with a live byte-savings panel showing original size, minified size, bytes saved, and the percentage reduction.
- Toggle the optimizations you want: preserve /*! important comments for license headers, lowercase hex, shorten hex, remove leading zeros, and drop the unit on zero values.
- Click Copy CSS to grab the minified result, or Replace with minified to load the output back into the input for another pass.
About this tool
CSS Minifier compresses stylesheets directly in your browser so production CSS ships at the smallest size that still parses correctly. Paste your CSS into the input on the left, and a minified version appears on the right with a live byte-savings readout (original size, minified size, bytes saved, and the percentage reduction) so you can see exactly how much smaller the output is. Each optimization is an independent toggle so you only run the transformations you want. The pipeline strips comments by default but can preserve license and source-map directives that begin with /*! the way every major minifier does, collapses runs of whitespace outside of strings and url() literals, drops the trailing semicolon before } because it is purely decorative, lowercases hex colors for slightly better gzip ratios, shortens 6-digit hex pairs to 3-digit shorthand and 8-digit hex pairs to 4-digit shorthand when each pair has matching characters (#aabbcc becomes #abc), removes the leading zero from decimals (0.5em becomes .5em, -0.25rem becomes -.25rem), and drops the unit on a literal zero where the spec allows it (margin: 0px becomes margin: 0). Strings, comments, and unquoted url() bodies are passed through verbatim by a small state machine, so optimizations never break a font-family name like "Helvetica Neue", a content rule with whitespace, or a data URL inside background-image. The pipeline order is fixed and deterministic so the same input plus same options always produces the same output. Useful for shrinking critical CSS that ships inline in <head>, prepping component styles before bundling, sanity-checking the size of a design system, optimizing email-template stylesheets, and dropping a quick minified copy into a CDN, gist, or pull request without spinning up a build tool. Everything runs locally on your device, so design-system tokens, framework styles, and any private CSS you minify here never leave your browser.
Free to use. Works in your browser. No signup, no login.
Related tools
You may also like
CSS Gradient Generator
Linear, radial, and conic gradients with multi-stop editor and live preview.
Open tool
GeneratorCSS Box Shadow Generator
Layered box-shadow with live preview, opacity, inset, and Tailwind output.
Open tool
DeveloperHTML Formatter
Pretty-print and minify HTML with indent, wrap, and quote controls.
Open tool
GeneratorCSS Clamp Generator
Build clamp() for fluid type and spacing with a live viewport preview.
Open tool