Web Development
CSS Minify / Beautify
Compress CSS for production, or format minified CSS into a readable layout.
Too large to preview
Too large to preview
Minifying CSS strips whitespace, comments, and line breaks that only exist for human readability and have no effect on how a browser applies styles. The result is a smaller file and a faster page load.
How to use it
- Minify: paste CSS and the tool strips unnecessary whitespace, comments, and line breaks while keeping behavior identical.
- Beautify: paste minified CSS with no indentation to get a readable version back, with indentation and line breaks.
- Handy for quickly reading CSS from a third-party site that only ships a minified version.
Common uses
- Minifying CSS for production when there's no build tool (Vite, Webpack) set up, or for a quick one-off minification.
- Beautifying minified CSS from a third-party library to read or debug it.
- Estimating how much a CSS file will shrink before setting up an automated build.
Things to keep in mind
Minification never changes styling behavior — it's a purely syntactic transformation; if a page looks different after minifying, that's a bug in the tool, not an intentional change.
Without a source map, debugging minified CSS in production is harder — the line numbers shown in the browser console won't match the original file.
Article about this tool: CSS minification: what actually gets removed from the file, and why
Frequently asked questions
What exactly does minifying remove from my CSS?
Minify strips whitespace, line breaks and comments and shortens some values, reducing file size without changing how the CSS behaves.
Can Beautify perfectly restore my original formatting?
Beautify reformats the minified CSS with indentation and line breaks for readability, but it can't recover comments or your original style choices, since those were already removed during minification.
Is minification safe for any valid CSS?
Yes — for syntactically valid CSS, minifying only removes redundant characters and never changes selectors or property values, and everything runs locally in your browser.
Do I still need minification if the server already compresses files with Gzip?
Yes — minification and Gzip/Brotli compression complement each other: minification shrinks the source file itself before compression, and Gzip/Brotli further compresses the result during transfer, so together they produce a smaller final size than either technique alone.
What is a source map for minified CSS?
A source map is a separate file that maps lines of minified CSS back to the original, formatted code, letting browser dev tools show the correct line numbers and file names while debugging, even when the minified version is what actually ships to production.