Minify or beautify CSS with strings and data URIs left intact, and see how much smaller it got.
Strings, url() values and data URIs are protected, so a brace or semicolon inside one is never treated as syntax.
A stylesheet, a component's styles, or anything in between. Comments, extra spacing and inconsistent formatting are all fine, since it is rebuilt from scratch.
Minify strips comments and whitespace for production. Beautify does the opposite, expanding a compressed file into something you can actually read and review.
The label shows the percentage saved so you can judge whether it was worth it. Copy the result straight into your build or your stylesheet.
It should not. Strings, url() values and data URIs are captured before anything is rewritten, so a brace or semicolon inside a content property or a base64 image is never treated as syntax.
It depends entirely on how the file was written. Heavily commented and generously spaced stylesheets often shrink by a third or more, while already compact files barely change.
No. If you already have a build step, keep using it, because it can also remove unused rules and add prefixes. This tool is for quick one-off work and for inspecting a file you were handed.
No. Everything runs in your browser, so unreleased styles and client work stay on your machine.
No. That requires knowing which selectors your markup actually uses, which cannot be determined from the stylesheet alone. Use a dedicated tool in your build for that.
The leading zero is optional in CSS and dropping it saves a byte per occurrence. It is completely valid and every browser reads it the same way.
Yes. Beautify mode rebuilds indentation and line breaks, which is the fastest way to read a compressed stylesheet you did not write.
Yes, completely free with no sign-up.
CSS gradient generator with Tailwind output. Design linear and radial gradients visually, then copy production-ready CSS or Tailwind classes.
Open ToolIndent messy markup or minify it, with void elements and pre blocks handled correctly.
Open ToolBuild layered CSS box shadows with a live preview, then copy them as plain CSS or a Tailwind arbitrary value.
Open Tool