25个由css制作的漂亮的渐变色示例

25种漂亮的css渐变色，不知道如何设置好看的渐变色的同学可以参考一下的示例，如果您正在寻找好看的组合渐变色，下面的示例也可以是您的首选。

使用方法

将css复制到style里面，在需要使用的地方加上class即可。

stripe

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

flare

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

vanusa

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

sublime-light

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

bighead

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

velvet-sun

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

argon

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

celestial

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

relay

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

crystal-clear

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

ibiza-sunset

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

fresh-turboscent

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

cheer-up-emo-kid

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

starfall

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

nelson

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

forever-lost

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

blurry-beach

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

influenza

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

jshine

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

calm-darya

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

titanium

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

pinky

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

purple-paradise

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

horizon

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

noon-to-dusk

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