CSS3 имеет встроенные свойства для создания линейных, сферических и повторяющихся градиентов.

CSS3 Линейные градиенты

Обратите внимание: градиенты поддерживается во всех современных браузерах, но требует добавления специального префикса. Для браузера IE10+ требуется префикс -ms, для Chrome и Safari префикс -webkit, для Opera префикс -o и для Firefox префикс -moz.

В CSS2.1 градиенты реализовывались в виде отдельных картинок вставляющихся как фоновые, в CSS3 имеются встроенные свойства для создания градиентов. Так как в CSS3 сам браузер отрисовывает градиенты необходимость дополнительных запросов градиентных картинок у сервера отпадает и это позволяет увеличить скорость загрузки страниц.

Линейные градиенты создаются с помощью CSS3 метода linear-gradient, который должен указываться в значение свойства background.

Для того, чтобы создать линейный градиент необходимо указать его направление (может задаваться с помощью ключевых слов или градусов) и цвета перехода.

#wrap1 {
background:linear-gradient(top,white,black);
}
#wrap2 {
background:linear-gradient(left,white,black);
}
#wrap3 {
background:linear-gradient(0deg,white,black);
}
#wrap4 {
background:linear-gradient(270deg,white,black);
}

Цвета перехода - это цвета, которые принимает градиент в определенных его точках, например градиент, который плавно изменяет цвет с белого на черный имеет белый цвет перехода в начальной точке и черный в конечной.

Линейные градиенты могут иметь неограниченное количество цветов перехода.

Вы можете указывать координаты местоположения цветов с помощью % (0% подразумевает начало градиента, 100% конец).

#wrap1 {
background:linear-gradient(top,white 0%,green 50%,black 100%);
}
#wrap2 {
background:linear-gradient(left,#8F04A8 0%,#7CE700 60%,#FFE100 100%);
}

Сферические градиенты

С помощью метода radial-gradient Вы можете создавать сферические градиенты.

Синтаксис определения сферических градиентов очень похож на синтаксис линейных, но требует также задания формы градиента (может быть сферической или эллипсоидной).

#wrap1 {
background:radial-gradient(white 20%,black 40%);
}
#wrap2 {
background:radial-gradient(circle,#8F04A8 0%,#5D016D 40%,black 60%);
}

Повторяющиеся градиенты

Повторяющиеся градиенты задаются с помощью CSS3 методов repeating-linear-gradient (создает повторяющийся линейный градиент) и repeating-radial-gradient (создает повторяющийся сферический градиент).

Для того, чтобы создать повторяющийся градиент Вы должны указать направление градиента, а также цвета перехода и расстояние, которое они должны занимать.

#wrap1 {
background:repeating-linear-gradient(50deg,white,white 5px,black 5px,black 10px);
}
#wrap2 {
background:repeating-radial-gradient(circle,#8F04A8 0%,#5D016D 40%,black 60%);
}