CSS Minifier & Beautifier
Shrink CSS by removing comments and unneeded whitespace without touching strings, url() values or calc() spacing, or beautify minified CSS into indented rules.
About the CSS Minifier & Beautifier
This tool does two opposite jobs on CSS. Minify removes what browsers don’t need: comments, line breaks, indentation, the spaces around braces, colons, semicolons and commas, and the last semicolon in each block. Beautify goes the other way and turns a one-line stylesheet back into indented rules with one declaration per line, so you can read and edit it.
The minifier reads your CSS token by token instead of running blanket find-and-replace, because some whitespace in CSS changes meaning. It keeps the spaces in calc(100% - 10px), which is invalid without them; the space in a :hover, which selects something different from a:hover; the spaces between words in media queries such as screen and (max-width:600px); and everything inside quoted strings and url(). Comments that start with /*!, the usual way to mark licence headers, are kept.
A typical use is a small site or a theme tweak with no build step: keep a readable copy of your CSS, and paste the minified version into the live file. The output panel shows the character count and how much smaller the result is. If your server also applies gzip or Brotli compression, the two savings add up.
This page handles CSS only. For HTML, use the HTML Beautifier, which can also minify; to make JavaScript or SQL readable, use the Code Beautifier.
How to use the CSS Minifier & Beautifier
- 1
Paste your CSS
Replace the example in the Input CSS box with your stylesheet or a snippet.
- 2
Click Minify or Beautify
Minify produces compact output. Beautify produces indented output using the Beautify indent setting of 2 or 4 spaces.
- 3
Check the result
The Output panel shows the new character count and, after minifying, the percentage saved.
- 4
Copy it
Click Copy and paste the result into your .css file or a style block.
What it can do
Whitespace-aware minification
Keeps the spaces that matter in calc(), min(), max() and clamp(), in descendant selectors and in media queries.
Strings and url() untouched
Quoted text, data URIs and unquoted url() values are copied exactly.
Licence comments kept
Comments starting with /*! survive minification; all other comments are removed.
Beautify with nesting
Blocks inside @media, @supports and native CSS nesting are indented, and comments stay on their own lines.
Size feedback
Character counts for input and output, plus the percentage saved when minifying.
Limitations
- It removes only whitespace, comments and redundant semicolons. It does not shorten colours, merge duplicate rules or remove unused selectors the way build-tool minifiers can, so their output may be smaller.
- It does not check that your CSS is valid. Broken CSS goes in and broken CSS comes out, just more compact.
- Sass and Less syntax such as // line comments is not recognised; compile to plain CSS first.
- JavaScript is not supported.
- Savings are counted in characters, before any server-side compression.
Privacy
Your CSS is processed by JavaScript in your browser and is not uploaded to FlexyPdf.
Frequently asked questions
Can minifying break my CSS?
It is designed not to. Spaces are removed only next to characters where CSS never needs them, such as braces, semicolons and commas, and kept wherever they can change meaning: around + and - in calc(), before a colon in a selector, between words in media queries and inside strings. Keep your readable source file as the master copy either way.
How much smaller will my file get?
It depends on how much of the file is comments, indentation and line breaks. Well-commented, generously indented CSS shrinks a lot; CSS that is already compact shrinks very little. The output panel shows the exact percentage for your file.
Why is one comment still in the minified output?
Comments that begin with /*! are kept on purpose. That convention marks licence or copyright notices that must stay with the code. Change /*! to /* if you want it removed.
Can I minify JavaScript here too?
No, this tool is for CSS only. Safe JavaScript minification needs a full parser that can rename variables, which is a job for a build tool. The Code Beautifier can make minified JavaScript readable again, though.
Does Beautify restore my original formatting?
It produces a consistent layout: one declaration per line, a space after each colon and indented nested blocks. Comments that were removed by minifying cannot come back, which is another reason to keep your original file.
Ratings & Reviews
Rate CSS Minifier & Beautifier
Help others by sharing your experience. Your rating is shown without your name.
More Developer Tools
View all →Code Beautifier
Re-indent JavaScript, SQL, JSON, HTML, CSS and XML code
JSON Formatter & Validator
Validate, pretty-print or minify JSON
XML Validator
Check that XML is well-formed and see where it breaks
Markdown Editor
Write Markdown with a live GitHub-style preview