25 CSS gradients for your next project
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);
}Image credit: Toa Heftiba on Unsplash
Recommended snippets
Learn how CSS custom properties (CSS variables) work and what you can use them for in your code and designs.
Learn everything you need to know about CSS units with this handy cheatsheet.
Flexbox allows you to create fluid layouts easily. If you find yourself constantly looking up the syntax or how it work, this handy cheatsheet is all you need.