Toolstia / CSS minifier and beautifier
CSS minifier and beautifier
Paste your CSS and either shrink it for production or format it with neat indentation so it is easy to read. You see how much smaller the minified file is. Your code is not uploaded.
How it works
- Paste your CSS or press Use sample.
- Choose Beautify or Minify.
- Copy or download the result.
What minifying does
It removes comments and unneeded spaces and line breaks, and drops the last semicolon in each block. The CSS means exactly the same thing, but the file is smaller and loads faster.
What it leaves alone
Text inside quotes, url() values and the spaces inside calc() are kept as they are, so `calc(100% - 10px)` and strings such as `content: "a b"` still work.
Beautify
Beautify puts each rule and property on its own line with consistent indentation, which is helpful when you are reading CSS that someone else minified.
Know the limits
This is a careful whitespace minifier. It does not merge rules, rename anything or remove unused CSS, so build tools can shrink very large files further.
Questions
Is my CSS uploaded?
No. It is processed in your browser.
Will minifying break my styles?
It should not, because only comments and unneeded spacing are removed. Test the result before you deploy it.
Does it support SCSS or Less?
Beautify handles simple SCSS and Less nesting, but minify is for plain CSS.
Can I download the file?
Yes, with the Download button.