ToolHarbor

CSS Minifier

Minify CSS code by removing comments, whitespace, and unnecessary characters. Reduce stylesheet size instantly.

Features

  • Remove comments, whitespace, and line breaks from CSS
  • Strip last semicolons before closing braces for extra savings
  • See original vs minified size and savings percentage
  • Works entirely offline — your code never leaves your browser
  • Copy minified output with one click
  • Handles large stylesheets with complex selectors

How to Use

  1. 1Paste your CSS code into the input field
  2. 2Click "Minify" to compress the CSS
  3. 3View the minified output and size savings on the right
  4. 4Click "Copy" to copy the minified CSS to your clipboard

Examples

Minifying basic styles

Input

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

Output

body{margin:0;padding:0;font-family:Arial,sans-serif}.container{max-width:1200px;margin:0 auto;padding:20px}
Removing comments

Input

/* Main header styles */
.header {
  background: #1a1a2e;
  color: white;
  /* Fixed positioning */
  position: fixed;
  top: 0;
  width: 100%;
}

Output

.header{background:#1a1a2e;color:white;position:fixed;top:0;width:100%}

What Is CSS Minification?

CSS minification is the process of removing all unnecessary characters from CSS source code to reduce its file size. This includes comments, whitespace, line breaks, indentation, and redundant semicolons. The browser interprets the minified CSS identically to the original — the visual result is the same, but the file downloads faster.

Stylesheets are one of the most impactful assets for page load performance because they are render-blocking. The browser cannot display content until it has downloaded and parsed the CSS. A smaller CSS file means the browser can start rendering sooner, which directly improves First Contentful Paint (FCP) and Largest Contentful Paint (LCP) metrics.

This tool performs several optimizations: it strips all CSS comments (both single-line and multi-line), collapses whitespace around selectors and properties, removes trailing semicolons before closing braces, and eliminates unnecessary spaces around operators. These are safe transformations that never change how your styles are applied.

For production websites, CSS minification is a standard best practice. Build tools like PostCSS, cssnano, and esbuild handle this automatically in CI/CD pipelines. However, this tool is useful when you need to quickly minify a snippet, check the size savings for a specific stylesheet, or minify CSS outside a build system.

All minification happens in your browser using client-side JavaScript. Whether your CSS contains proprietary design tokens, internal class names, or custom properties, it never leaves your device. No data is uploaded, no logs are kept — just instant, private CSS compression.

Frequently Asked Questions

Related Tools