CSS Minifier / Beautifier
Compress CSS into a single compact line, or reformat it back into readable, indented code.
Paste any CSS and either minify it — stripping comments, whitespace and line breaks to shrink file size for production — or beautify it back into clean, indented, readable formatting for editing. Both directions run instantly using simple text-processing rules directly in your browser.
Why production and development want opposite formatting
During development, indented, well-commented CSS is far easier to read, navigate, and debug — spacing and comments cost nothing while you're actively editing. But once a stylesheet ships to actual visitors, every extra byte of whitespace and every comment adds to page load time with zero benefit to the end user, which is why minified CSS became the standard for production deployment even though it's nearly unreadable to a person.
What minification actually strips out
Minifying removes comments entirely, collapses all unnecessary whitespace and line breaks, and removes the last semicolon before a closing brace where it's not strictly required — all changes that affect only how the file looks, never what it actually does, since browsers parse CSS structure based on braces, colons, and semicolons rather than indentation or spacing.
When beautifying a stylesheet is worth doing
Beautifying is most useful when inheriting an already-minified stylesheet from elsewhere — a downloaded theme, a legacy project, or a file pulled directly from a live site's source — and needing to actually read and modify it. Reformatting it back into indented, readable code first makes it dramatically easier to locate the specific rule you need to change.
How to use it
- Paste your CSS into the input box.
- Click Minify to compress it, or Beautify to reformat it.
- Review the result in the box.
- Copy the result for use in your project.
Common ways people use this tool
Preparing a stylesheet for production deployment
Minify a development CSS file to reduce its size before publishing it live.
Reading someone else's minified stylesheet
Beautify a minified CSS file pulled from a live website's source to make it readable for editing or learning.
Cleaning up inconsistently formatted CSS
Reformat CSS that was written or pasted with inconsistent indentation back into a clean, standard structure.
Tips for getting the best results
- Keep an unminified source version of your CSS for ongoing editing, and only minify the final copy you actually deploy.
- Check that comments you want to keep (like licensing notices) are preserved separately before minifying, since the process strips all comments.
- After beautifying inherited CSS, scan for any obviously duplicate or conflicting rules that become more visible once properly formatted.
- Remember minifying doesn't change what the CSS does — if a stylesheet has a bug, minifying or beautifying it won't fix the underlying rule.
Frequently asked questions
Does minifying remove comments?
Yes, all /* ... */ comments are stripped out during minification to save space.
Will beautifying fix broken CSS syntax?
No — this reformats spacing and indentation but doesn't validate or fix invalid CSS properties or selectors.
How much size reduction can I expect from minifying?
It varies by how much whitespace and commenting the original had, but 10–30% size reduction is common for typically-formatted CSS.
Is minified CSS slower to edit directly?
Yes, minified CSS is deliberately compact and hard to read, which is why most workflows keep an unminified source file for editing and only minify a separate build output.
Does this tool support SCSS or LESS syntax?
No, it works with standard plain CSS; SCSS/LESS files need to be compiled to CSS first before minifying or beautifying with this tool.
Can minifying CSS ever break a stylesheet?
Properly done minification shouldn't change behaviour, though CSS relying on unusual whitespace-sensitive hacks (rare in modern CSS) could theoretically be affected — worth spot-checking a minified file's appearance after the change.
Is there a size limit on how much CSS I can paste in?
No hard limit — very large stylesheets may just take a brief moment longer to process.
Will minifying combine multiple separate CSS files into one?
No, this tool only reformats the CSS you paste into it — combining multiple files together would need to be done separately, before or after using this tool.
Does beautifying add back any comments that minifying removed?
No, comments are permanently stripped during minification and can't be restored by beautifying afterward — always keep a separate original copy if the comments matter for future reference.
Can I minify CSS that includes CSS custom properties (variables)?
Yes, CSS custom properties like --main-color are treated as regular property declarations and are minified the same way as any other CSS rule.
Does minifying affect the visual output of a webpage at all?
No, minification only changes the file's formatting, never the actual rules or values — a page should render pixel-for-pixel identically whether its CSS is minified or not.
Can I minify CSS that includes media queries for responsive design?
Yes, media query blocks are handled the same as any other CSS rule block, with their internal whitespace and structure minified or beautified consistently.
Why do some minifiers produce slightly different output for the same input CSS?
Different minification tools can make slightly different choices about edge cases, like whether to remove a final semicolon before a closing brace — the resulting CSS still behaves identically even if the exact minified text differs slightly between tools.