Compress CSS for production, beautify it for readability, or split a large stylesheet into logical files. All processing runs entirely in your browser — your code never leaves your machine.
This tool combines three essential CSS processing operations. Minification removes everything the browser doesn't need — whitespace, comments, redundant semicolons, and zero-value units — to produce the smallest possible stylesheet. Formatting does the opposite: it takes compressed or inconsistently-styled CSS and produces a clean, readable, consistently-indented version. Splitting breaks a monolithic stylesheet into smaller logical files.
Removes comments, whitespace, redundant semicolons, and zero units. Optionally strips legacy vendor prefixes.
Beautify compressed or messy CSS with consistent indentation, sorted properties, and one declaration per line.
Split by @media queries, selector prefix, or chunk size — perfect for code-splitting or modularising a legacy stylesheet.
See original vs. compressed size, percentage saved, rule counts, selector counts, and declaration counts.
On a typical stylesheet, minification alone saves 15–30% of file size. Combined with gzip compression on the server (which all modern servers apply automatically), the total saving is often 70–80% compared to the original formatted source. For a 100 KB stylesheet, that could mean serving only 25 KB over the wire.
The biggest wins come from: removing comments (which can be 20% of a documented stylesheet), collapsing whitespace (indentation and newlines), removing zero units (0px → 0), and shortening color values (#ffffff → #fff).
CSS splitting is useful when: (1) your stylesheet has grown beyond ~500 rules and you want to break it into logical modules, (2) you're migrating from a monolithic stylesheet to a component-based architecture, (3) you need separate media-query files for advanced loading strategies, or (4) you're adding CSS code-splitting to a build pipeline.
Split by @media queries to extract responsive overrides into a separate file loaded only on relevant viewport sizes. Split by selector prefix to separate BEM blocks, utility classes, or component namespaces. Split by file size for even chunking for HTTP/2 parallel loading.
Sorted properties follow a logical grouping order: positioning → display/box-model → dimensions → spacing → typography → visual effects → miscellaneous. Consistent ordering makes code review faster and git diffs cleaner — two authors editing the same rule won't produce merge conflicts from different property orderings.
Well-written CSS minification is semantically lossless — the browser produces identical output. The only exception is hack-based selectors that rely on specific whitespace patterns (very rare in modern CSS). This tool does not merge selectors, reorder rules, or remove duplicate declarations, which are the operations that can occasionally alter rendering.
Run autoprefixer (and other PostCSS plugins) first, then minify the result. Minifying before autoprefixer is fine too, but running autoprefixer on minified CSS produces harder-to-read output that's trickier to debug if something goes wrong. The standard build pipeline is: source → PostCSS (autoprefixer, nesting, etc.) → minifier.
It strips properties that start with -webkit-, -moz-, -ms-, and -o-. This is safe for modern browsers (2020+) which no longer require prefixes for most properties. Only use this option if you're intentionally dropping support for old browser versions and have verified it with your browser support targets.
The tool groups rules by the first component of their selector. Rules starting with .btn go into btn.css, rules starting with .card go into card.css, and so on. Unqualified element selectors (body, h1) and media queries go into a base.css file.
The formatter and minifier work on plain CSS syntax. SCSS/Less files will mostly work if they don't use preprocessor-specific features (variables, nesting, mixins). For proper SCSS handling — including compilation — use the SCSS ↔ CSS Converter.
Yes — @import, @charset, @layer, @keyframes, @font-face, and @media at-rules are preserved correctly through both minification and formatting. Nested at-rules (as used in modern CSS Nesting and @scope) are also handled.