CSS Minifier & Beautifier

Minify or beautify CSS with size reduction stats and comment removal options

Remove comments

Input:1.4 KB

Output:1.0 KB

Saved:-28.8%

Lines:93 → 1

Input CSS1,477 bytes / 93 lines

/* Modern Card Component Styles */

/*
 * Responsive card with gradient border
 * and hover effects
 */

.card {
  position: relative;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 2px;
  max-width: 400px;
  transition: all 0.3s ease;
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  background: #1a1a1a;
  z-index: -1;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.card-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.card-body {
  padding: 1.5rem;
  color: #a0a0a0;
  line-height: 1.6;
}

.card-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  gap: 1rem;
}

/* Button styles */
.btn {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-primary {
  background-color: #667eea;
  color: white;
}

.btn-primary:hover {
  background-color: #5568d3;
}

/* Responsive utilities */
@media (max-width: 768px) {
  .card {
    max-width: 100%;
  }

.card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

Minified output1,051 bytes / 1 lines

.card{position:relative;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:12px;padding:2px;max-width:400px;transition:all 0.3s ease}.card::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:12px;background:#1a1a1a;z-index:-1}.card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(102,126,234,0.3)}.card-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;border-bottom:1px solid rgba(255,255,255,0.1)}.card-title{font-size:1.5rem;font-weight:700;color:#ffffff;margin:0}.card-body{padding:1.5rem;color:#a0a0a0;line-height:1.6}.card-footer{padding:1rem 1.5rem;border-top:1px solid rgba(255,255,255,0.1);display:flex;gap:1rem}.btn{padding:0.5rem 1rem;border-radius:6px;border:none;font-weight:600;cursor:pointer;transition:background-color 0.2s ease}.btn-primary{background-color:#667eea;color:white}.btn-primary:hover{background-color:#5568d3}@media (max-width:768px){.card{max-width:100%}.card-header{flex-direction:column;align-items:flex-start;gap:1rem}}

Updated October 2, 2026. Provided as is. Check the output before you rely on it in production.

How to use CSS Minifier & Beautifier

1

Paste CSS code

Paste CSS rules from a stylesheet, including media queries and keyframes.
2

Minify or beautify

Minify strips whitespace and comments to reduce file size. Beautify reformats compressed CSS with indentation.
3

Keep or remove comments

Toggle Remove comments. Keep them when license headers must survive minification.
4

Copy or download

Copy the result or download it as a .css file, and check the size reduction in the stats bar.

Questions and answers

What is CSS Minifier & Beautifier?

Minifying CSS removes whitespace and comments so stylesheets download faster; beautifying re-indents compressed CSS so people can read it. This tool does both, keeps /*! license comments when stripping comments, offers 2-space, 4-space or tab indentation, and shows the size reduction.

Does CSS Minifier & Beautifier store or send my data?

No. All processing happens entirely in your browser. Your CSS code never leaves your device — nothing is sent to any server.

Should I minify CSS for production?

Yes. Minifying CSS removes unnecessary whitespace and comments, reducing file size and improving page load times. Most build tools like Vite, Webpack, and PostCSS can automate this, but this tool is handy for quick one-off minification.

For AI agents: how to call this tool

Machine-readable contract, endpoints and examples. Humans can ignore this section.

Best Path For Builders

Browser workflow

Runs instantly in the browser with private local processing and copy/export-ready output.

Browser Workflow

This tool is optimized for instant in-browser execution with local data handling. Run it here and copy/export the output directly.

/css-minifier/

For automation planning, fetch the canonical contract at /api/tool/css-minifier.json.

CSS Minifier & Beautifier