CSS Minifier & Beautifier
Minify and beautify CSS code with advanced styling options
Input CSS
Output CSS
Processed CSS will appear here
CSS Minifier & Beautifier
Minify and beautify CSS code with advanced styling options
Features
- Bidirectional in one tool: Minify shrinks CSS for production (removes whitespace/comments/redundancy) while Beautify expands minified CSS to readable indented rules
- CSS3 / CSS4 support: nested selectors, custom properties (--var), @container, @layer, @supports, calc(), color functions (oklch, color-mix), grid-template-areas — all handled correctly
- Smart minification: drops repeated rules within the same selector, merges adjacent media queries with identical conditions, shortens color values (#FFFFFF → #FFF), strips px units from zero (0px → 0)
- Beautify options: indent 2/4/tab, sort declarations alphabetically, group properties by category (positioning, box-model, typography, etc.), wrap long selectors
- Live byte savings report: original size, minified size, percentage saved, gzip-projected savings — useful for justifying refactor effort
- Per-rule comment handling: /*! preserved (license/copyright), /* * */ stripped by default but optional preserved on the beautify path
- Source-map output (when beautifying), import resolution toggle (@import inlining), and vendor-prefix normalization toggle
- Pure client-side: parser runs in your browser; no upload, works offline once cached
How to use
- Paste your CSS into the input pane.
- Pick mode: Minify for production, Beautify for inspection or editing.
- For minify, choose preserve-comments level (none, /*! only, all) and toggle merge-media-queries.
- For beautify, pick indent size, declaration sort order, and selector wrap width.
- Click Process. Output pane shows result with byte-size statistics.
- Copy or download (.min.css for minified, .css for beautified).
Tips & Best Practices
- For production builds, integrate cssnano or csso in your build pipeline; this tool is for ad-hoc inspection and quick minification.
- Use beautify with declaration sorting on legacy stylesheets to reduce diff noise during team refactors.
- When debugging cascade issues, beautify the production CSS in DevTools to see actual computed rule order.
- For CSS-in-JS projects, extract styles to plain CSS first (via webpack-css-extract or equivalent) before pasting here.
- The byte savings shown are pre-gzip; your actual wire savings will be smaller because gzip compresses whitespace efficiently.
FAQ
Will minified CSS render identically to my source?
Yes, when the input is valid CSS. The minifier preserves selector specificity, cascade order, and inheritance — only whitespace, comments, and redundant declarations are removed. Edge cases: very complex selectors that hit browser bugs may behave differently when minified; test in your target browsers.
What does "merge adjacent media queries" do?
CSS like `@media (max-width: 768px) { .a {…} } @media (max-width: 768px) { .b {…} }` minifies to one query with both rules: `@media (max-width: 768px) { .a {…} .b {…} }`. Saves bytes and improves render performance (one query evaluation instead of two).
Why is my color hex code unchanged when I expected #FFF?
The minifier only shortens 6-digit hex colors where all three pairs are identical (#FFFFFF → #FFF, #AABBCC stays). Modern CSS supports 8-digit hex for alpha (#FF0000FF) which won't shorten either.
Does it handle CSS-in-JS extracted styles?
If the input is plain CSS (extracted by webpack/vite/etc.), yes. If you paste a styled-components or emotion template literal, the parser sees JavaScript template syntax not CSS and will error.
Can it sort properties alphabetically?
In beautify mode, yes. The "sort declarations" toggle alphabetizes properties within each rule. Useful for reducing diff noise across team contributions — most teams agree to either alphabetical or grouped order.
What about CSS variables (custom properties)?
Preserved as-is. The minifier doesn't know what runtime value a `var(--theme-color)` resolves to, so it can't fold them. Custom properties stay in the output for runtime resolution.
Does it strip vendor prefixes?
No — vendor prefixes are kept because you might need them for older browsers. Use Autoprefixer (PostCSS plugin) in your build pipeline to manage prefixes per-browser-target; this tool is format-only.
Is my CSS sent anywhere?
No. The parser runs entirely in your browser; no upload happens. Works offline once cached.