Градиенты

Градиент — переход одного цвета в другой. Часто используется в дизайне сайтов, делается на чистом css.
Генератор градиентов

Варианты градиентов

Простой (линейный)

-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)"; /* IE 8-9 */
background: -webkit-linear-gradient(left, red, #f06d06); /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
background: -moz-linear-gradient(left, red, #f06d06); /* Firefox 3.6-15 */
background: -o-linear-gradient(left, red, #f06d06); /* Opera 11.1-12 */
background: linear-gradient(to right, red, #f06d06); /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */

Радиальный

background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1-6.0 */
background: -o-radial-gradient(red, yellow, green); /* Opera 11.6-12.0 */
background: -moz-radial-gradient(red, yellow, green); /* Firefox 3.6-15 */
background: radial-gradient(red, yellow, green); /* Стандартный синтаксис */
background: -webkit-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* Safari 5.1-6.0 */
background: -o-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* Opera 11.6-12.0 */ 
background: -moz-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* Firefox 3.6-15 */
background: radial-gradient(farthest-side at 60% 55%, red, yellow, black); /* Стандартный синтаксис */

Градиент с углом наклона и резким переходом

.combo {
	background: -webkit-linear-gradient(-45deg, rgb(200, 255, 117) 50%, rgb(151, 211, 255) 50%);
	background: -moz-linear-gradient(-45deg, rgb(200, 255, 117) 50%, rgb(151, 211, 255) 50%);
	background: -o-linear-gradient(-45deg, rgb(200, 255, 117) 50%, rgb(151, 211, 255) 50%);
	background: linear-gradient(-45deg, rgb(200, 255, 117) 50%, rgb(151, 211, 255) 50%);
}

Сложный многоцветный градиент

background: #1e5799;
background: -moz-linear-gradient(-45deg,  #1e5799 0%, #1b918d 30%, #207cca 70%, #745aa8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #1e5799 0%,#1b918d 30%,#207cca 70%,#745aa8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #1e5799 0%,#1b918d 30%,#207cca 70%,#745aa8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#745aa8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

Анимированный градиент

Создаем div с id gradient, на который будет воздействовать скрипт

$(document).ready(function() {
	
var colors = new Array(
  [62,35,255],
  [60,255,60],
  [255,35,98],
  [45,175,230],
  [255,0,255],
  [255,128,0]);

var step = 0;
// Индексы таблицы цветов: 
// Текущий цвет слева
// Следующий цвет слева
// Текущий цвет справа
// Следующий цвет справа
var colorIndices = [0,1,2,3];

//Скорость перехода
var gradientSpeed = 0.002;

function updateGradient()
{
  
  if ( $===undefined ) return;
  
var c0_0 = colors[colorIndices[0]];
var c0_1 = colors[colorIndices[1]];
var c1_0 = colors[colorIndices[2]];
var c1_1 = colors[colorIndices[3]];

var istep = 1 - step;
var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
var color1 = "rgb("+r1+","+g1+","+b1+")";

var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
var color2 = "rgb("+r2+","+g2+","+b2+")";

 $('#gradient').css({
   background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({
    background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"});
  
  step += gradientSpeed;
  if ( step >= 1 )
  {
    step %= 1;
    colorIndices[0] = colorIndices[1];
    colorIndices[2] = colorIndices[3];
    
    //Выберите два новых целевых индекса цвета
    //Не выбирайте текущие индексы цветов
    colorIndices[1] = ( colorIndices[1] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
    colorIndices[3] = ( colorIndices[3] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
    
  }
}

setInterval(updateGradient,10);

});

Также для этих же целей есть отличное решение — скрипт granim.js. Ознакомится.

Этот же эффект только на чистом CSS

body {
	width: 100wh;
	height: 90vh;
	color: #fff;
	background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
	background-size: 400% 400%;
	-webkit-animation: Gradient 15s ease infinite;
	-moz-animation: Gradient 15s ease infinite;
	animation: Gradient 15s ease infinite;
}

@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

Градиент для Internet Explorer

Для IE также необходимо следить за высотой body, иначе градиент будет прерываться. Помогает свойство position: fixed;

body:before {
    content: ' ';
    height: 100%;
    position: fixed;
    top: 0;
    width: 100%;
    will-change: transform;
    z-index: -999;
background: -webkit-linear-gradient(0deg, #013f98 0%, #03214d 100%);
background: -moz-linear-gradient(0deg, #013f98 0%, #03214d 100%);
background: -o-linear-gradient(0deg, #013f98 0%, #03214d 100%);
background: linear-gradient(0deg, #013f98 0%, #03214d 100%);
}

[site-socialshare]