MT
My Toolbox

Free Online CSS Minifier & Beautifier — Compress or Format CSS Instantly

Paste CSS to minify for production or beautify for readability. See exact byte savings, compare sizes, and copy the result — all in your browser.

Original: 386 BMinified: 280 B27.5%
CSS Input
Output

What Is CSS Minification?

CSS minification is the process of removing unnecessary characters from CSS source code without changing its functionality. This includes stripping comments, whitespace, newlines, block delimiters, and trailing semicolons to produce the smallest possible file size.

Smaller CSS files download faster, reduce bandwidth costs, and improve page rendering speed — especially on mobile connections. Most build tools (Webpack, Vite, esbuild) include CSS minification as a production step, but sometimes you need a quick one-off minification without setting up an entire pipeline.

Beautification is the reverse: taking compressed CSS and adding consistent indentation, line breaks, and spacing so the code becomes readable and editable. This is essential when debugging third-party stylesheets or inspecting production code.

How to Use

  1. Paste your CSS into the input area.
  2. Choose Minify to compress or Beautify to format.
  3. For beautification, select your preferred indent size (2, 4, or 8 spaces).
  4. View the result in the output panel with real-time size comparison.
  5. Click Copy to grab the processed CSS.

When You Need This

Preparing inline CSS for emails

Email templates often need compact inline styles. Minify your CSS before inlining it to keep HTML email file size low and avoid clipping in Gmail.

Debugging minified third-party CSS

When a CDN stylesheet is causing layout issues, paste the minified CSS here and beautify it to read the selectors and properties clearly.

Quick production builds without tooling

For a small landing page or prototype that does not use a bundler, minify your CSS here before deploying to reduce page load time.

Comparing file sizes before and after optimization

Paste your CSS to see exactly how many bytes you save with minification, helping you decide if further optimization (like PurgeCSS) is worthwhile.

Tips

1.

Always keep the unminified source in version control

Minified CSS is unreadable. Store the formatted source in your repository and only minify as a build/deploy step so you can always debug and edit the original.

2.

Test after minification

While rare, aggressive minification can break CSS that relies on specific formatting (e.g., content properties with whitespace). Always verify your layout in a browser after minifying.

3.

Combine minification with gzip for maximum savings

Minification removes redundancy at the source level; gzip compresses at the byte level. Together they typically reduce CSS by 80–90% compared to the raw source.

4.

Use beautify with consistent indent for team readability

Agree on an indent size (2 or 4 spaces) across your team. Consistent formatting makes pull request diffs cleaner and code reviews faster.

Examples

Minify a simple rule

Removes whitespace, comments, and the trailing semicolon.

Input

/* Button styles */
.btn {
  display: inline-block;
  padding: 8px 16px;
  color: #fff;
}

Output

.btn{display:inline-block;padding:8px 16px;color:#fff}

Beautify compressed CSS

Adds indentation and line breaks for readability.

Input

.nav{display:flex;gap:1rem}.nav a{color:#333;text-decoration:none}

Output

.nav {
  display: flex;
  gap: 1rem;
}

.nav a {
  color: #333;
  text-decoration: none;
}

Minify media query block

Handles nested at-rules correctly.

Input

@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

Output

@media (max-width: 768px){.sidebar{display:none}}

Limitations

  • Does not perform advanced optimizations like shorthand merging, duplicate declaration removal, or color format optimization.
  • Cannot process @import statements — only the CSS in the input box is minified, not referenced files.
  • Does not support CSS-in-JS formats (styled-components, Emotion). Paste plain CSS only.
  • Beautification uses a fixed style (one property per line, 2-space indent). Custom formatting rules are not configurable.

Features

  • Minify CSS by removing comments, whitespace, and trailing semicolons
  • Beautify compressed CSS with configurable indentation (2, 4, or 8 spaces)
  • Real-time size comparison showing bytes saved and compression percentage
  • Handles @media queries, @keyframes, and nested at-rules
  • Preserves content inside CSS strings (e.g., content: "...")
  • 100% client-side processing, your CSS stays on your machine

FAQ

Will minification break my CSS?

No. Minification only removes characters that have no effect on rendering — comments, extra whitespace, and unnecessary semicolons. The browser interprets the minified output identically to the original.

What is the difference between minification and compression (gzip)?

Minification reduces file size by removing unnecessary source characters. Gzip is a transfer-encoding that compresses the file during delivery. They work at different layers and should be used together for optimal performance.

Does this tool handle CSS variables (custom properties)?

Yes. CSS custom properties (--my-color: #fff) are preserved exactly as written. The minifier only removes formatting characters, not property values or names.

Can I minify SCSS or LESS with this tool?

This tool is designed for standard CSS. SCSS and LESS should be compiled to CSS first (using sass or lessc), then the output can be minified here.

Is my CSS sent to a server?

No. All processing happens entirely in your browser using JavaScript. Your code never leaves your machine.

Content last reviewed: June 2026

Your Privacy

All CSS processing happens entirely in your browser. No data is uploaded to any server. Your stylesheets never leave your device.

Tips & Related Workflows