Градиент в CSS

С появлением CSS3 стилевые возможности сайта очень расширились – начиная с малых стилей, заканчивая анимацией. В этой статье речь пойдет про Градиент в CSS.

Градиент (от лат. gradiens, род. падеж gradientis — шагающий, растущий). С математической точки зрения – это вектор, в направлении которого переменная меняется из одной точки в другую.

В компьютерной графике – это вид фона (заливки) где один цвет плавно переходит в другой. То есть, как и в математике, есть и направление (вектор) и переменная которая меняется (цвет).

В графике существуют следующие виды градиента:

линейный;

радиальный;

угловой (конусный);

отраженный (зеркальный);

ромбовидный (алмазный);

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

Линейный градиент – цвет меняется по прямой: справа-налево, сверху-вниз и т.д.

Для того,чтобы задать линейный градиент нужно задать следующие параметры:

– начальная точка (та с которой начнется изменение исходного цвета), которая определяет направление. Может задаваться с помощью слов (top, right, bottom, left) или градусов (0deg – 360deg);

– цвета перехода (минимум два цвета, но можно гораздо больше);

Синтаксис

В самом простом написании будет минимум три величины:

linear-gradient (top, white, blue);

Пример

HTML редактор онлайн

Синтаксис написания линейного градиента может быть значительно расширен путем добавления координат перехода цветов. Координаты задаются в процентах, где 0% – начало градиента, а 100% конец;

linear-gradient (top, white 10%, red 70%, blue 90%);

Пример

HTML редактор онлайн

Радиальный градиент

Синтаксис радиального градиента очень похож, только вместо направления нужно задать позицию градиента.

Также можно указать форму которая может быть сферической (circle) или эллиптическая (ellipse). По умолчанию форма градиента эллиптическая.

radial-gradient (center, circle, red 30%, blue 60%);

Пример

HTML редактор онлайн