Градиенты описываются внутри CSS-свойства background-image или background. Простейший градиент можно описать таким образом:
background-image: linear-gradient(параметры);
background: radial-gradient(параметры)
Сам градиент создаётся функцией linear-gradient, в параметрах которой указываются направление градиента и набор цветов. Направление можно не указывать, тогда будет использовано значение по умолчанию — сверху вниз. Цветов может быть любое количество.
Направления градиента задаются с помощью ключевых слов: top, bottom, left, right.
Направление градиента располагается перед списком цветов и включает в себя частицу to. Она была добавлена в синтаксис для улучшения читабельности и наглядности:
background: linear-gradient(to right, yellow, green);
И сразу понятно, что это: «Жёлто-зелёный градиент слева направо».
Вот примеры разных направлений градиента c цветами yellow, green:
to right
to left
to bottom
to top
Градиенты можно направлять по диагонали, из угла в угол. Для этого нужно комбинировать top, bottom и left, right. Например, градиент, идущий из левого нижнего в правый верхний угол:
background-image: linear-gradient(to right top, yellow, green);
Вот примеры диагональных градиентов c цветами yellow, green:
to right top
to right bottom
to left bottom
to left top
Направление линейного градиента можно задавать и в виде произвольного угла, например, 245°. Направление в градусах задаётся с помощью единицы измерения deg. Можно задавать положительные и отрицательные углы. Примеры:
background-image: linear-gradient(90deg, yellow, green);
background-image: linear-gradient(-135deg, yellow, green);
Углы градиента отсчитываются так:
0deg соответствует 12 часам, а отсчёт угла идет по часовой стрелке. В случае, если угол задан отрицательным значением, например, -90deg, то он отсчитывается против часовой стрелки.
Иногда градиенты с направлениями, заданными с помощью градусов и диагоналей, выглядят одинаково.
to right top
45deg
Однако их поведение отличается. Градиенты, заданные с помощью градусов, не зависят от формы контейнера, а диагональные градиенты зависят. Диагональные градиенты всегда остаются привязанными к своим углам.
Конечно, если контейнеры квадратные, то отличий не видно.
В линейный градиент можно включать больше двух цветов. Для этого цвета просто перечисляются через запятую. Например, если задать такой CSS:
linear-gradient(to right, red, yellow, green)
То получится равномерный градиент c тремя цветами.
По умолчанию цвета в градиентах распределяются равномерно, в одинаковых пропорциях, но этим поведением можно управлять. Делается это с помощью так называемых колорстопов, которые записываются сразу после значений цветов, например, red 0%, yellow 100%.
Колорстоп указывает положение цвета в градиенте, его можно задавать в процентах, пикселях и других единицах. Давайте рассмотрим несколько примеров, чтобы понять поведение колорстопов:
yellow, green
yellow 0%, green 100%
yellow 0%, green 50%
yellow 50%, green 100%
yellow 25%, green 75%
red, yellow, green
red 0%, yellow 50%, green 100%
red 33%, yellow 66%, green 100%
Колорстоп задаёт то место, где будет располагаться центральная (самая насыщенная) часть цвета.
Позиция цвета (или колорстоп) задаёт расположение центральной части цвета, ту точку, от которой начинается переход в другой цвет.
А что будет, если задать для соседних цветов одну и ту же позицию? В этом случае получится резкий переход цветов, так как они оба будут «вытекать» из одной точки в противоположных направлениях.
Легче продемонстрировать это поведение на примере:
yellow 25%, green 75%
yellow 45%, green 55%
yellow 49%, green 51%
yellow 50%, green 50%
Этот приём часто используют для создания интересных эффектов.
Зададим элементу прозрачную рамку. Далее применяется градиент через свойство border-image. В конце border-image-slice задается в 1, чтобы градиент использовал всю обводку рамки.
.card1 {
border: 5px solid transparent;
border-image: linear-gradient(to bottom, #22c1c3, #fdbb2d);
border-image-slice: 1;
width: 8rem;
padding: 5rem 2rem;
margin: 5rem auto;
font-size: 100px;
See the Pen CSS Border Gradient Demo by Envato Tuts+ (@tutsplus) on CodePen.
Этот подход не позволит добавить border-radius. Давайте рассмотрим другой способ.
Сначала div задается position: relative. Далее к блоку добавляется псевдоэлемент с отрицательным абсолютным позиционированием для ширины рамки (5px у нас).
Так мы получим сплошной градиентный блок поверх нашего div. Добавив z-index -1, мы переместим его под div. Далее добавляем border-radius к псевдоэлементу, равный своему родителю (пусть будет 10px). Далее задаем фон родителя. Если задать цвет фона страницы, то он будет прозрачным.
Наконец, применяем background-clip к родителю со значением padding-box. Так div будет залит до края рамки, но не далее.
See the Pen CSS Border Gradient Demo, With `border-radius` by Envato Tuts+ (@tutsplus) on CodePen.
Различные варианты.
background: radial-gradient(#fdbb2d, #22c1c3);
background: radial-gradient(circle, #fdbb2d, #22c1c3);
background: radial-gradient(circle at top left, #fdbb2d, #22c1c3);
background: radial-gradient(ellipse at center, rgba(197,222,234,1) 0%,rgba(138,187,215,1) 52%,rgba(6,109,171,1) 100%);
Сначала задаётся тип окружности (ellipse, ellipse cover), его положение (в нашем случае в центре). После этого следует синтаксис, как в линейных градиентах.
uiGradients - Beautiful colored gradients
Gradient CSS Generator | CSSmatic