CSS Minifier

Optimize CSS Files Online

completely free, foreverNo SignupBrowser-basedPopular

CSS MinifierCompress & Optimize CSS Online · Zero Dependencies
Preset:
Original
1.87 KB
Minified
1.26 KB
Saved
617 B
Reduction
32%
Compression-32%
0 B minifiedoriginal
Minification Options
Remove Commentsmedium
Strip /* */ comment blocks
Collapse Whitespacehigh
Remove spaces, newlines, tabs
Remove Trailing ;low
Drop last ; before } (valid CSS)
Shorten Colorsmedium
#aabbcc→#abc, #ffffff→#fff
Remove Zero Unitslow
0px → 0, 0em → 0 etc.
Shorten Valueslow
0.5→.5, font-weight:bold→700
Collapse Shorthandlow
margin:0 0 0 0 → margin:0
Remove Empty Ruleslow
Delete selectors with empty {}
Normalize Quoteslow
Convert single → double quotes
input.css1.87 KB · 121L
/* Main stylesheet — v2.4.1 */

:root {
  --primary-color: #0066ff;
  --secondary-color: #ffffff;
  --font-size-base: 16px;
  --border-radius: 8px;
}

/* Reset */
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  font-size: var(--font-size-base);
  background-color: #ffffff;
  color: #000000;
  line-height: 1.6;
}

/* Navigation */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px 16px 24px;
  background-color: #000080;
  border-bottom: 1px solid #808080;
}

.navbar .logo {
  font-size: 24px;
  font-weight: bold;
  color: #ffffff;
  text-decoration: none;
}

.nav-links a {
  color: #ffffff;
  text-decoration: none;
  margin-left: 16px;
  font-size: 0.875rem;
  transition: opacity 0.3s ease;
}

.nav-links a:hover {
  opacity: 0.75;
}

/* Hero section */
.hero {
  padding: 80px 0px;
  text-align: center;
  background: linear-gradient(135deg, #0066ff, #00ffff);
}

.hero h1 {
  font-size: 3rem;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 16px;
}

.hero p {
  font-size: 1.25rem;
  color: #ffffff;
  max-width: 600px;
  margin: 0 auto 0 auto;
}

/* Button */
.btn {
  display: inline-block;
  padding: 12px 24px 12px 24px;
  background-color: #0066ff;
  color: #ffffff;
  border-radius: 8px;
  font-weight: bold;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn:hover {
  background-color: #0052cc;
  transform: translateY(-2px);
}

/* Empty rule that can be removed */
.empty-class {

}

/* Card */
.card {
  background: #ffffff;
  border: 1px solid #c0c0c0;
  border-radius: 8px;
  padding: 24px 24px 24px 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    gap: 16px;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .hero {
    padding: 40px 0px;
  }
}
minified.css-32%1.26 KB · 1L
1:color:#60a5fa">root{--primary-color:color:#0066ff;text-shadow:0 0 color:#34d399">8color:#6ee7b7">px #0066ff60">#06f;--secondary-color:color:#ffffff;text-shadow:0 0 color:#34d399">8color:#6ee7b7">px #ffffff60">#fff;--font-size-base:color:#34d399">16color:#6ee7b7">px;--border-radius:color:#34d399">8color:#6ee7b7">px}*{margin:0;padding:0;box-sizing:border-box}color:#60a5fa">body{font-family:'Inter',sans-serif;font-size:var(--font-size-base);background-color:color:#ffffff;text-shadow:0 0 color:#34d399">8color:#6ee7b7">px #ffffff60">#fff;color:color:#000000;text-shadow:0 0 color:#34d399">8color:#6ee7b7">px #00000060">#000;line-height:1.6}color:#60a5fa">.navbar{display:flex;align-items:center;justify-content:space-between;padding:color:#34d399">16color:#6ee7b7">px color:#34d399">24color:#6ee7b7">px;background-color:navy;border-bottom:color:#34d399">1color:#6ee7b7">px solid gray}.navbar color:#60a5fa">.logo{font-size:color:#34d399">24color:#6ee7b7">px;font-weight:700;color:color:#ffffff;text-shadow:0 0 color:#34d399">8color:#6ee7b7">px #ffffff60">#fff;text-decoration:none}.nav-links color:#60a5fa">a{color:color:#ffffff;text-shadow:0 0 color:#34d399">8color:#6ee7b7">px #ffffff60">#fff;text-decoration:none;margin-left:color:#34d399">16color:#6ee7b7">px;font-size:.color:#34d399">875color:#6ee7b7">rem;transition:opacity .color:#34d399">3color:#6ee7b7">s ease}.nav-links a:color:#60a5fa">hover{opacity:.75}color:#60a5fa">.hero{padding:color:#34d399">80color:#6ee7b7">px 0;text-align:center;background:linear-gradient(color:#34d399">135color:#6ee7b7">deg,color:#0066ff;text-shadow:0 0 color:#34d399">8color:#6ee7b7">px #0066ff60">#06f,color:#00ffff;text-shadow:0 0 color:#34d399">8color:#6ee7b7">px #00ffff60">#0ff)}.hero color:#60a5fa">h1{font-size:color:#34d399">3color:#6ee7b7">rem;font-weight:700;color:color:#ffffff;text-shadow:0 0 color:#34d399">8color:#6ee7b7">px #ffffff60">#fff;margin-bottom:color:#34d399">16color:#6ee7b7">px}.hero color:#60a5fa">p{font-size:color:#34d399">1.25color:#6ee7b7">rem;color:color:#ffffff;text-shadow:0 0 color:#34d399">8color:#6ee7b7">px #ffffff60">#fff;max-width:color:#34d399">600color:#6ee7b7">px;margin:0 auto}color:#60a5fa">.btn{display:inline-block;padding:color:#34d399">12color:#6ee7b7">px color:#34d399">24color:#6ee7b7">px;background-color:color:#0066ff;text-shadow:0 0 color:#34d399">8color:#6ee7b7">px #0066ff60">#06f;color:color:#ffffff;text-shadow:0 0 color:#34d399">8color:#6ee7b7">px #ffffff60">#fff;border-radius:color:#34d399">8color:#6ee7b7">px;font-weight:700;text-decoration:none;border:0;cursor:pointer;transition:all .color:#34d399">2color:#6ee7b7">s ease}.btn:color:#60a5fa">hover{background-color:color:#0052cc;text-shadow:0 0 color:#34d399">8color:#6ee7b7">px #0052cc60">#0052cc;transform:translateY(-color:#34d399">2color:#6ee7b7">px)}color:#60a5fa">.card{background:color:#ffffff;text-shadow:0 0 color:#34d399">8color:#6ee7b7">px #ffffff60">#fff;border:color:#34d399">1color:#6ee7b7">px solid silver;border-radius:color:#34d399">8color:#6ee7b7">px;padding:color:#34d399">24color:#6ee7b7">px;box-shadow:0 color:#34d399">2color:#6ee7b7">px color:#34d399">4color:#6ee7b7">px rgba(0,0,0,.1)}color:color:#c084fc;text-shadow:0 0 color:#34d399">8color:#6ee7b7">px #c084fc60">#c084fc">@media (max-width:color:#34d399">768color:#6ee7b7">px){color:#60a5fa">.navbar{flex-direction:column;gap:color:#34d399">16color:#6ee7b7">px}.hero color:#60a5fa">h1{font-size:color:#34d399">2color:#6ee7b7">rem}color:#60a5fa">.hero{padding:color:#34d399">40color:#6ee7b7">px 0}}
Instant minification
Runs entirely in your browser — no data is sent to any server. Safe for proprietary stylesheets.
Colour shortening
#aabbcc → #abc saves 3 chars per colour. On large stylesheets this adds up quickly.
Safe vs Max
'Safe' skips transforms that could theoretically affect edge-case rendering. 'Max' applies every optimisation.

How to use

Paste your CSS code in the input field above.
Click "Minify CSS".
Wait a moment while we compress and optimize your CSS code.
Copy the minified CSS code and use it in your website's stylesheet.

Why use this tool?

completely free, forever

No sign-up, no watermarks, and no daily limits.

Optimize & Compress

Minify your CSS code to reduce file size and improve website performance.

Fast & Efficient

Quickly minify CSS code with just a few clicks to enhance your website's load time.

SEO & Performance Boost

Optimized CSS code leads to faster page loading and better SEO ranking.

All Devices

Works on Windows, Mac, iPhone, iPad, and Android devices.

Frequently asked questions

Is this CSS minifier free?▼

Yes — 100%. All tools on dipsac.com are completely free. No account needed, no watermarks, no daily limits.

How do I minify my CSS code?▼

Paste your CSS code into the input field, click 'Minify CSS', and copy the minified version once it's ready.

What does CSS minification do?▼

CSS minification removes unnecessary spaces, comments, and line breaks from your CSS code, reducing file size and improving website speed.

Is my data secure during the minification process?▼

Yes, your data is processed securely and deleted automatically after the minification to ensure privacy and security.

Which devices are supported?▼

Works on Windows, Mac, iPhone, iPad, and Android devices.

About CSS Minifier

Optimize CSS Files Online This free online tool runs entirely in your browser — no files are ever uploaded to our servers, ensuring your data stays private and secure. No registration, no watermarks, no limits.

Free forever

No hidden fees or paywalls

Zero uploads

100% browser-based processing

No account needed

Start using immediately

CSS Minifier

CSS Minifier

How to use

Why use this tool?

Frequently asked questions

About CSS Minifier

Need to process files at scale?