CSS-градиент

CSS-градиент создает фон из нескольких цветов с плавным переходом между ними.

Градиент может быть задан в background, background-image, border-image, content и list-style-image.

Линейный градиент linear-gradient()

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

Пример

div {
    width: 100%;
    height: 50px;
    background: linear-gradient(#def, #7ac);
}

Направление градиента можно задать ключевыми словами:
to left top, to top, to right top, to left, to right, to left bottom, to bottom (по умолчанию), to right bottom.

Пример

div {
    width: 100%;
    height: 50px;
    background: linear-gradient(to top right, #def, #7ac);
}

Направление градиента можно задать также положительным или отрицательным углом в градусах.

Пример

div {
    width: 100%;
    height: 50px;
    background: linear-gradient(45deg, #def, #7ac);
}

Ключевые слова to top right не аналогичны углу 45deg:

to top right	Направление градиента из нижнего левого угла в верхний правый угол элемента
45deg	Направление градиента строго под углом в 45 независимо от формы элемента

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

Пример

div {
    width: 100%;
    height: 50px;
    background: linear-gradient(#bdf, #def, #7ac);
}

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

Пример

div {
    width: 100%;
    height: 50px;
    background: linear-gradient(#bdf, #def 20%, #7ac 55%);
}

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

Пример

div {
    width: 100%;
    height: 50px;
    background: linear-gradient(#def 49%, #7ac 51%);
}

Если каждый последующий цвет начинать с конца предыдущего цвета, и применить свойство background-size, то получится полосатый фон.

Пример

div {
    width: 100%;
    height: 50px;
    background: linear-gradient(-45deg, #def 33%, #7ac 33%, #7ac 66%, #def 66%) 0 100%;
    background-size: 100px 50px;
}

Полосатый фон можно также задать, используя вместо функции linear-gradient() функцию повтора линейного градиента repeating-linear-gradient().

Пример

div {
    width: 100%;
    height: 50px;
    background: repeating-linear-gradient(-45deg, #def, #def 30px, #7ac 30px, #7ac 60px, #def 60px);
}

Радиальный градиент radial-gradient()

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

Пример

div {
    width: 100%;
    height: 50px;
}
div:first-of-type {
    background: linear-gradient(#def, #7ac);
}
div:last-of-type {
    background: radial-gradient(#def, #7ac);
    margin-top: 10px;
}

Цветов в радиальном градиенте, как и в линейном, может быть несколько.

Пример

div {
    width: 100%;
    height: 50px;
}
div {
    background: radial-gradient(#def, #7ac, #bdf);
}

Форма градиента определяется ключевыми словами circle или ellipse (по умолчанию).

Пример

div {
    width: 100%;
    height: 50px;
}
div:nth-of-type(1) {
    background: radial-gradient(#def, #7ac, #bdf);
}
div:nth-of-type(2) {
    background: radial-gradient(circle, #def, #7ac, #bdf);
    margin-top: 10px;
}

Для элемента с одинаковыми значениями ширины и высоты разница между круглым и эллиптическим градиентом незаметна.

Пример

div {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}
div:nth-of-type(1) {
    background: radial-gradient(circle, #def, #7ac, #bdf);
    margin: 0 auto;
}
div:nth-of-type(2) {
    background: radial-gradient(#def, #7ac, #bdf);
    margin: 10px auto 0;
}

Положение центра радиального градиента можно указать в пикселях, процентах и с помощью ключевых слов: left top, top, right top, left, center (по умолчанию), right, left bottom, bottom, right bottom. Впереди ставится ключевое слово at.

Пример

div {
    width: 100%;
    height: 50px;
}
div:nth-of-type(1) {
    background: radial-gradient(at 0 50px, #def, #7ac, #bdf);
}
div:nth-of-type(2) {
    background: radial-gradient(at 0 100%, #def, #7ac, #bdf);
    margin-top: 10px;
}
div:nth-of-type(3) {
    background: radial-gradient(at left bottom, #def, #7ac, #bdf);
    margin-top: 10px;
}

Размер градиента можно указать в пикселях, процентах (только для ellipse) и с помощью ключевых слов. Если указано одно значение, то это радиус круглого градиента. Если указано два значения, то первое задает ширину градиента, а второе – высоту.

Пример

div {
    width: 100%;
    height: 50px;
}
div:nth-of-type(1) {
    background: radial-gradient(25px, #def, #7ac, #bdf);
}
div:nth-of-type(2) {
    background: radial-gradient(100px at right, #def, #7ac, #bdf);
    margin-top: 10px;
}
div:nth-of-type(3) {
    background: radial-gradient(25% 50% at 10% 30%, #def, #7ac, #bdf);
    margin-top: 10px;
}

Ключевые слова, задающие размер радиального градиента:

closest-side	Градиент распространяется до ближней стороны элемента.
farthest-side	Градиент распространяется до дальней стороны элемента.
closest-corner	Градиент распространяется до ближнего угла элемента.
farthest-corner	Градиент распространяется до дальнего угла элемента.

Пример closest-side и farthest-side

div {
    width: 100%;
    height: 50px;
}
div:nth-of-type(1) {
    background: radial-gradient(circle closest-side at 30px 20px, #def, #7ac, #bdf);
}
div:nth-of-type(2) {
    background: radial-gradient(closest-side at 30px 20px, #def, #7ac, #bdf);
    margin-top: 10px;
}
div:nth-of-type(3) {
    background: radial-gradient(circle farthest-side at 30px 20px, #def, #7ac, #bdf);
    margin-top: 10px;
}
div:nth-of-type(4) {
    background: radial-gradient(farthest-side at 30px 20px, #def, #7ac, #bdf);
    margin-top: 10px;
}

Пример closest-corner и farthest-corner

div {
    width: 100%;
    height: 50px;
}
div:nth-of-type(1) {
    background: radial-gradient(circle closest-corner at 30px 20px, #def, #7ac, #bdf);
}
div:nth-of-type(2) {
    background: radial-gradient(closest-corner at 30px 20px, #def, #7ac, #bdf);
    margin-top: 10px;
}
div:nth-of-type(3) {
    background: radial-gradient(circle farthest-corner at 30px 20px, #def, #7ac, #bdf);
    margin-top: 10px;
}
div:nth-of-type(4) {
    background: radial-gradient(farthest-corner at 30px 20px, #def, #7ac, #bdf);
    margin-top: 10px;
}

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

Пример

div {
    width: 100%;
    height: 50px;
    background: radial-gradient(circle closest-side, #def 10px, #7ac 10px, #7ac 20px, #bdf 20px);
}

Используя свойство background-size, узор радиального градиента можно размножить.

Пример

div {
    width: 100%;
    height: 50px;
    background: radial-gradient(circle closest-side, #def 10px, #7ac 10px, #7ac 20px, #bdf 20px) 50% 50%;
    background-size: 50px 50px;
}

Градиент в виде концентрических кругов создается с помощью функции повтора радиального градиента repeating-radial-gradient().

Пример

div {
    width: 100%;
    height: 50px;
    background: repeating-radial-gradient(circle at 50px 25px, #def, #def 2px, #7ac 2px, #7ac 4px, #bdf 4px, #bdf 6px);
}

Используя различные градиенты и их сочетания, можно получить интересные эффекты. Например:

• Наложение градиента на фоновое изображение
• Комбинация нескольких градиентов
• Объемная кнопка
• Перфорированная рамка

Поддержка CSS-градиентов современными браузерами достаточно хорошая.

Читать дальше: Flexbox

.