CSS Gradients

gradients.css

/*
 *
 * GRADIENTS.CSS
 * v.1.0.0
 * @mrmrs
 *
 * Each color has a class for setting a gradient on
 * text & background
 *
 * - Aqua
 * - Blue
 * - Navy
 * - Teal
 * - Green
 * - Lime
 * - Yellow
 * - Orange
 * - Red
 * - Fuchshia
 * - Purple
 * - Maroon
 *
 */


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

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

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

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

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

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

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

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

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

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

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


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