CSS Minifier/Beautifier
Minify CSS to reduce file size or beautify compressed CSS for readability.
How to use
- 1 Paste your CSS into the input area.
- 2 Click Beautify to format it with consistent indentation and line breaks.
- 3 Click Minify to compress it by removing all whitespace — useful for production builds.
- 4 Click Copy to grab the result.
Key features
- Beautify mode: adds consistent indentation and line breaks
- Minify mode: strips all whitespace for production builds
- Preserves CSS comments in beautified output
- Works with plain CSS, media queries, and keyframe animations
CSS Formatting and Minification
CSS formatting is the process of either beautifying compressed or inline styles into readable, indented code, or minifying readable CSS by removing whitespace, comments, and redundant characters to reduce file size. Neither operation changes what the CSS does — the browser parses and applies rules identically regardless of formatting.
In production, minified CSS reduces the number of bytes the browser downloads. A typical stylesheet minified with a tool like cssnano or clean-css can shrink by 20–40%. When combined with gzip compression, the savings are even greater since repeated patterns compress better.
Common Use Cases
Debugging minified production CSS
Beautify minified CSS from a live site to inspect specific properties when browser DevTools source maps are unavailable.
Preparing CSS for deployment
Minify stylesheets before serving them directly without a build pipeline — useful for quick projects or CMS themes.
Reviewing vendor CSS
Format minified CSS from a third-party widget or plugin to understand what styles it applies.
Cleaning up inline styles
Paste styles copied from a tool like Figma or a visual editor and format them into clean, readable CSS rules.
Build pipeline validation
Compare beautified output against minified to verify your build tool didn't incorrectly drop or alter any rules.
Learning CSS architecture
Explore how well-known frameworks like Bootstrap or Bulma structure their stylesheets by formatting and reading the source.
What Minification Actually Does
These are the transformations applied when converting readable CSS to its compact form.
Whitespace removal
Spaces, tabs, and newlines between selectors, properties, and values are removed.
Comment stripping
All /* ... */ comments are removed (except license comments with /*!)
Value shortening
#ffffff → #fff, 0px → 0, 0.5 → .5, rgba(0,0,0,0) → transparent
Shorthand merging
margin-top/right/bottom/left can be collapsed into a single margin shorthand.