25 CSS gradients for your next project

CSS, Visual · Jun 12, 2021

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 our top picks in case you're looking for some color:

.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);
}
.argon {
  background: linear-gradient(to right, #03001e, #7303c0, #ec38bc, #fdeff9);
}
.celestial {
  background: linear-gradient(to right, #c33764, #1d2671);
}
.relay {
  background: linear-gradient(to right, #3a1c71, #d76d77, #ffaf7b);
}
.crystal-clear {
  background: linear-gradient(to right, #159957, #155799);
}
.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);
}
.jshine {
  background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
}
.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);
}

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub.

More like this