CSS Minifier

CSS Minifier

This CSS Minifier removes unnecessary whitespace, comments, line breaks, and redundant characters from stylesheets to produce the most compact representation. It reduces file size for faster page loads and improved performance scores.

The minification runs locally in your browser using the html-minifier library. Your CSS code never leaves your device, making it safe for processing proprietary stylesheets, framework themes, or any CSS that may contain sensitive design tokens.

How to use

1. Paste your formatted CSS into the input editor.
2. Click Minify CSS to strip whitespace and comments.
3. View the compact CSS in the output editor.
4. Use Copy for the clipboard, Download for a .css file, or Clear to reset both editors.

What is CSS minification?

CSS minification is the process of removing all characters from a stylesheet that are not required for correct rendering. This includes stripping whitespace, removing comments, collapsing line breaks, and removing unnecessary semicolons or units where possible.

Minified CSS is a standard practice in web performance optimization. Tools like cssnano, clean-css, and Lightning CSS are commonly used in build pipelines. This browser-based tool provides a quick way to minify individual stylesheets without a build tool.

Input notes

The tool accepts any valid CSS input. It wraps the CSS in style tags to leverage the html-minifier library's CSS minification capabilities, then strips the wrapper tags from the output. Comments and unnecessary whitespace are removed.

Example

Formatted CSS is compressed by removing whitespace and comments:

--- Input (formatted) ---
/* Card component */
.card {
  background: #fff;
  border: 1px solid #ddd;
  padding: 16px;
  border-radius: 8px;
}

--- Output (minified) ---
.card{background:#fff;border:1px solid #ddd;padding:16px;border-radius:8px}