[CSS]スニペットに登録しておくべし！繊細で美しいグラデーションをコピペで利用できる -GRADIENTS

div要素などにclassを一つ加えるだけで、繊細で美しいグラデーションを簡単に利用できるスタイルシートのパックを紹介します。

GRADIENTS
GRADIENTS -GitHub

GRADIENTSのライセンスはMIT Licenseで、個人でも商用でも無料で利用できます。改変、配布、サブライセンスもOKです。
著作権は、Copyright ©2015 @mrmrs にあります。

aqua

.bg-aqua-gradient {
  background: rgba(127,219,255,1);
  background: -webkit-linear-gradient(top, rgba(127,219,255,1) 0%, rgba(82,140,163,1) 100%);
  background: linear-gradient(to bottom, rgba(127,219,255,1) 0%, rgba(82,140,163,1) 100%);
}

blue

.bg-blue-gradient {
  background: rgba(0,116,217,1);
  background: -webkit-linear-gradient(top, rgba(0,116,217,1) 0%, rgba(0,65,122,1) 100%);
  background: linear-gradient(to bottom, rgba(0,116,217,1) 0%, rgba(0,65,122,1) 100%);
}

navy

.bg-navy-gradient {
  background: rgba(0,32,63,1);
  background: -webkit-linear-gradient(top, rgba(0,32,63,1) 0%, rgba(0,10,20,1) 100%);
  background: linear-gradient(to bottom, rgba(0,32,63,1) 0%, rgba(0,10,20,1) 100%);
}

teal

.bg-teal-gradient {
  background: rgba(57,204,204,1);
  background: -webkit-linear-gradient(top, rgba(57,204,204,1) 0%, rgba(34,122,122,1) 100%);
  background: linear-gradient(to bottom, rgba(57,204,204,1) 0%, rgba(34,122,122,1) 100%);
}

green

.bg-green-gradient {
  background: rgba(46,204,64,1);
  background: -webkit-linear-gradient(top, rgba(46,204,64,1) 0%, rgba(28,122,39,1) 100%);
  background: linear-gradient(to bottom, rgba(46,204,64,1) 0%, rgba(28,122,39,1) 100%);
}

lime

.bg-lime-gradient {
  background: rgba(1,255,111,1);
  background: -webkit-linear-gradient(top, rgba(1,255,111,1) 0%, rgba(2,163,72,1) 100%);
  background: linear-gradient(to bottom, rgba(1,255,111,1) 0%, rgba(2,163,72,1) 100%);
}

yellow

.bg-yellow-gradient {
  background: rgba(255,221,0,1);
  background: -webkit-linear-gradient(top, rgba(255,221,0,1) 0%, rgba(184,147,0,1) 100%);
  background: linear-gradient(to bottom, rgba(255,221,0,1) 0%, rgba(184,147,0,1) 100%);
}

orange

.bg-orange-gradient {
  background: rgba(255,133,27,1);
  background: -webkit-linear-gradient(top, rgba(255,133,27,1) 0%, rgba(255,80,27,1) 100%);
  background: linear-gradient(to bottom, rgba(255,133,27,1) 0%, rgba(255,80,27,1) 100%);
}

red

.bg-red-gradient {
  background: rgba(246,46,36,1);
  background: -webkit-linear-gradient(top, rgba(246,46,36,1) 0%, rgba(255,54,121,1) 100%);
  background: linear-gradient(to bottom, rgba(246,46,36,1) 0%, rgba(255,54,121,1) 100%);
}

fuchsia

.bg-fuchsia-gradient {
  background: rgba(240,18,188,1);
  background: -webkit-linear-gradient(top, rgba(240,18,188,1) 0%, rgba(163,11,128,1) 100%);
  background: linear-gradient(to bottom, rgba(240,18,188,1) 0%, rgba(163,11,128,1) 100%);
}

purple

.bg-purple-gradient {
  background: rgba(176,13,201,1);
  background: -webkit-linear-gradient(top, rgba(176,13,201,1) 0%, rgba(107,7,122,1) 100%);
  background: linear-gradient(to bottom, rgba(176,13,201,1) 0%, rgba(107,7,122,1) 100%);
}

maroon

.bg-maroon-gradient {
  background: rgba(204,31,115,1);
  background: -webkit-linear-gradient(top, rgba(204,31,115,1) 0%, rgba(133,20,75,1) 100%);
  background: linear-gradient(to bottom, rgba(204,31,115,1) 0%, rgba(133,20,75,1) 100%);
}