Log in Get started

Back to 30 Seconds Of Code

25 CSS gradients for your next project

content/snippets/css/s/25-css-gradients.md

14.0.05.7 KB

Original Source

uiGradients has an amazing collection of ready-to-use CSS gradients for pretty much anything. I highly recommend checking out the full collection. Meantime, here are my top picks in case you're looking for some color:

<style> .gradient-box { grid-column: 1 / -1; width: 100%; height: 144px; border-radius: var(--layout-border-radius) var(--layout-border-radius) 0 0; margin-top: var(--layout-row-spacing); } .gradient-box + pre { margin-block-start: calc(-1 * var(--layout-row-spacing, 0)); border-radius: 0 0 var(--layout-border-radius) var(--layout-border-radius); } .stripe { background: linear-gradient(to right, #1fa2ff, #12d8fa, #a6ffcb); } .flare { background: linear-gradient(to right, #f12711, #f5af19); } .vanusa { background: linear-gradient(to right, #da4453, #89216b); } .sublime-light { background: linear-gradient(to right, #fc5c7d, #6a82fb); } .bighead { background: linear-gradient(to right, #c94b4b, #4b134f); } .velvet-sun { background: linear-gradient(to right, #e1eec3, #f05053); } .relay { background: linear-gradient(to right, #3a1c71, #d76d77, #ffaf7b); } .crystal-clear { background: linear-gradient(to right, #159957, #155799); } .celestial { background: linear-gradient(to right, #c33764, #1d2671); } .ibiza-sunset { background: linear-gradient(to right, #ee0979, #ff6a00); } .fresh-turboscent { background: linear-gradient(to right, #f1f2b5, #135058); } .cheer-up-emo-kid { background: linear-gradient(to right, #556270, #ff6b6b); } .starfall { background: linear-gradient(to right, #f0c27b, #4b1248); } .nelson { background: linear-gradient(to right, #f2709c, #ff9472); } .forever-lost { background: linear-gradient(to right, #5d4157, #a8caba); } .blurry-beach { background: linear-gradient(to right, #d53369, #cbad6d); } .influenza { background: linear-gradient(to right, #c04848, #480048); } .calm-darya { background: linear-gradient(to right, #5f2c82, #49a09d); } .titanium { background: linear-gradient(to right, #283048, #859398); } .pinky { background: linear-gradient(to right, #dd5e89, #f7bb97); } .purple-paradise { background: linear-gradient(to right, #1d2b64, #f8cdda); } .horizon { background: linear-gradient(to right, #003973, #e5e5be); } .noon-to-dusk { background: linear-gradient(to right, #ff6e7f, #bfe9ff); } .jshine { background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59); } .argon { background: linear-gradient(to right, #03001e, #7303c0, #ec38bc, #fdeff9); } </style> <div class="gradient-box stripe"></div>

css

.stripe {
  background: linear-gradient(to right, #1fa2ff, #12d8fa, #a6ffcb);
}

<div class="gradient-box flare"></div>

css

.flare {
  background: linear-gradient(to right, #f12711, #f5af19);
}

<div class="gradient-box vanusa"></div>

css

.vanusa {
  background: linear-gradient(to right, #da4453, #89216b);
}

<div class="gradient-box sublime-light"></div>

css

.sublime-light {
  background: linear-gradient(to right, #fc5c7d, #6a82fb);
}

<div class="gradient-box bighead"></div>

css

.bighead {
  background: linear-gradient(to right, #c94b4b, #4b134f);
}

<div class="gradient-box velvet-sun"></div>

css

.velvet-sun {
  background: linear-gradient(to right, #e1eec3, #f05053);
}

<div class="gradient-box argon"></div>

css

.argon {
  background: linear-gradient(to right, #03001e, #7303c0, #ec38bc, #fdeff9);
}

<div class="gradient-box celestial"></div>

css

.celestial {
  background: linear-gradient(to right, #c33764, #1d2671);
}

<div class="gradient-box relay"></div>

css

.relay {
  background: linear-gradient(to right, #3a1c71, #d76d77, #ffaf7b);
}

<div class="gradient-box crystal-clear"></div>

css

.crystal-clear {
  background: linear-gradient(to right, #159957, #155799);
}

<div class="gradient-box ibiza-sunset"></div>

css

.ibiza-sunset {
  background: linear-gradient(to right, #ee0979, #ff6a00);
}

<div class="gradient-box fresh-turboscent"></div>

css

.fresh-turboscent {
  background: linear-gradient(to right, #f1f2b5, #135058);
}

<div class="gradient-box cheer-up-emo-kid"></div>

css

.cheer-up-emo-kid {
  background: linear-gradient(to right, #556270, #ff6b6b);
}

<div class="gradient-box starfall"></div>

css

.starfall {
  background: linear-gradient(to right, #f0c27b, #4b1248);
}

<div class="gradient-box nelson"></div>

css

.nelson {
  background: linear-gradient(to right, #f2709c, #ff9472);
}

<div class="gradient-box forever-lost"></div>

css

.forever-lost {
  background: linear-gradient(to right, #5d4157, #a8caba);
}

<div class="gradient-box blurry-beach"></div>

css

.blurry-beach {
  background: linear-gradient(to right, #d53369, #cbad6d);
}

<div class="gradient-box influenza"></div>

css

.influenza {
  background: linear-gradient(to right, #c04848, #480048);
}

<div class="gradient-box jshine"></div>

css

.jshine {
  background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
}

<div class="gradient-box calm-darya"></div>

css

.calm-darya {
  background: linear-gradient(to right, #5f2c82, #49a09d);
}

<div class="gradient-box titanium"></div>

css

.titanium {
  background: linear-gradient(to right, #283048, #859398);
}

<div class="gradient-box pinky"></div>

css

.pinky {
  background: linear-gradient(to right, #dd5e89, #f7bb97);
}

<div class="gradient-box purple-paradise"></div>

css

.purple-paradise {
  background: linear-gradient(to right, #1d2b64, #f8cdda);
}

<div class="gradient-box horizon"></div>

css

.horizon {
  background: linear-gradient(to right, #003973, #e5e5be);
}

<div class="gradient-box noon-to-dusk"></div>

css

.noon-to-dusk {
  background: linear-gradient(to right, #ff6e7f, #bfe9ff);
}