Paste your CSS in the input box. Click Minify to remove comments and extra whitespace for a smaller file, or Beautify to format minified CSS with clear indentation. The result is shown below with character counts; you can copy it for use in your project. All processing runs in your browser.
Result will appear here after minify or beautify.
About CSS Minifier / Beautifier
Minifying CSS means removing comments, extra spaces, and newlines so the file is smaller and loads faster — without changing how the browser applies styles. Beautifying does the opposite: it takes minified or messy CSS and reformats it with clear indentation and line breaks so you can read and edit it. Both run in your browser so your code never leaves your device.
How to use
- Paste your CSS into the CSS input box (e.g. copy from your stylesheet or from the browser dev tools).
- Click Minify to get a single-line, comment-free version and see how much the size was reduced; or click Beautify to get a formatted, readable version.
- Use Copy Output to copy the result, then paste it into your project or build pipeline. Clear resets both boxes.
When to use
- Reducing CSS file size for production to improve page load time
- Making minified or copied CSS readable again for debugging or editing
- Quick one-off minification without setting up a build tool
- Checking how much smaller your CSS can get after removing comments and whitespace
Details
Minify removes /* ... */ comments and collapses whitespace; the result is valid CSS. Beautify adds indentation after {, ;, and newlines. For advanced optimizations (e.g. shortening properties, removing unused rules), use a dedicated build tool like PostCSS with cssnano.