Beautify and minify CSS online. Custom indentation, byte reduction stats, runs in your browser.
Share this tool
Found it useful? Help a fellow developer discover it.
CSS files in production should be minified: removing whitespace, comments, and redundant semicolons reduces file size by 15 to 40 percent and improves load time. But minified CSS is unreadable for debugging. This tool handles both directions. Paste minified CSS from a CDN or npm package into the left panel and click Format to get a clean, indented version you can actually read. Choose two or four spaces for indentation to match your project convention. Switch to Minify mode to shrink any CSS before pasting it into a production stylesheet or inline style tag. The output panel shows the byte reduction as a percentage so you can see the impact at a glance. The formatter preserves all selectors, properties, media queries, custom properties, and at-rules exactly as-is.
CSS from third-party libraries, build tools, or API responses is often minified or inconsistently indented. When debugging styles or reviewing a pull request, formatted CSS lets you see property groupings, rule order, and selector nesting at a glance. Many teams also run formatters in CI to enforce a consistent code style.
A typical CSS file shrinks by 15 to 40 percent after minification. The reduction comes from removing whitespace, comments, and redundant semicolons. Bootstrap's CSS, for example, is about 195 KB unminified and around 160 KB minified. For production sites, serving the minified version improves page load time.
No. This tool handles standard CSS. SCSS and Less are preprocessor syntaxes that must be compiled to CSS first. Once compiled, the resulting CSS can be formatted or minified here.
Tailwind CSS is a utility-first framework where you apply classes directly in HTML rather than writing separate CSS files. This tool is for traditional CSS files that define custom styles. If you use Tailwind with a custom CSS layer, that custom layer can still be formatted here.
Yes. The minifier only removes whitespace and redundant characters while preserving all selectors, properties, values, and media queries. The output is semantically identical to the input.
HEX / RGB / HSL Color Converter
Convert colors between HEX, RGB, and HSL formats instantly.
CSS Gradient & Box-Shadow Generator
Generate linear, radial, and conic CSS gradients and layered box-shadows with a live preview. Copy ready-to-use CSS.
WCAG Color Contrast Checker
Check WCAG 2.1 contrast ratios for AA and AAA, normal and large text. Live preview plus accessible color suggestions.
SVG Optimizer
Optimize and minify SVG in your browser. Strip metadata, round precision, and export as SVG, data URI, or Base64. See bytes saved.
