CSS Minifier – Minify or Beautify CSS Online
Shrink your stylesheets or make minified CSS readable again. The minifier removes comments and whitespace without breaking calc(), strings or selectors; the beautifier formats code with clean indentation.
Paste CSS and choose Minify or Beautify. Minify removes comments (keeping /*! license notes if you like), whitespace, spaces around braces, colons and commas, and the last semicolon in each block, and shows the bytes saved. Beautify puts every declaration on its own indented line. Copy or download the result.
How to use CSS Minifier & Beautifier
- Paste your CSS.
- Choose Minify or Beautify.
- Decide whether to keep /*! license comments.
- Check the size difference.
- Copy or download the result.
What CSS minification removes
CSS minification deletes everything the browser ignores: comments, indentation, line breaks, spaces around { } : ; , > and ~, and the final semicolon before each closing brace. The rules themselves are untouched, so the page looks exactly the same.
| Before | After |
|---|---|
| `.card > h2 , .card + .card {` | `.card>h2,.card+.card{` |
| `margin : 0 auto ;` | `margin:0 auto;` |
| `calc( 1rem + 2vw )` | `calc(1rem + 2vw)` |
| `/ comment /` | removed |
Safe minification
Some spaces matter. Inside calc() the spaces around + and − are required, so they are kept. Strings in quotes, such as content values or font names, are copied unchanged. A space before a colon in a selector (`a :hover`) changes the meaning, so the minifier only removes spaces after colons. License comments starting with /*! are kept by default because many open-source licenses require them.
Beautify minified CSS
Got a minified file from a theme or framework and need to read or edit it? Switch to Beautify. Every rule starts on a new line, declarations are indented and selectors in a list get their own line. Media queries and other at-rules are indented one level deeper.
How much does minifying CSS save?
Hand-written stylesheets typically shrink by 15–35 %. Combined with gzip or Brotli on the server and removing unused rules, minified CSS loads faster and blocks rendering for less time — CSS is render-blocking, so every kilobyte in the critical path matters for Largest Contentful Paint.
Related tools
Minify the page markup with the HTML Minifier, convert pixel values with PX to REM Converter, and create the CSS for shadows, gradients and rounded corners with the CSS Box Shadow Generator, CSS Gradient Generator and Border Radius Generator. Everything runs locally in your browser.
Keep the source
Always keep your readable stylesheet in version control and minify a copy during deployment, so you never have to edit a minified file by hand.
You may also find these free tools useful: JSON Formatter, Password Generator and Regex Tester.
Frequently asked questions
How do I minify CSS?
Paste your CSS into the tool with Minify selected and copy the result.
Will minifying break my CSS?
No. The minifier keeps spaces that matter, such as inside calc(), and leaves strings unchanged.
How do I unminify CSS?
Switch to Beautify to format minified CSS with indentation and line breaks.
Should I keep license comments?
Yes, if the code is from an open-source project. Comments starting with /*! are kept by default.
Is my CSS uploaded?
No. Everything is processed in your browser.
Last updated: