Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс

Поиск по сайту

Наша группа в Telegram для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @it_rostov

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;
}

РЕЗУЛЬТАТ:

radial-gradient(#def, #7ac, #bdf);

radial-gradient(circle, #def, #7ac, #bdf);

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

Пример

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;
}

РЕЗУЛЬТАТ:

radial-gradient(circle, #def, #7ac, #bdf);

radial-gradient(#def, #7ac, #bdf);

Положение центра радиального градиента можно указать в пикселях, процентах и с помощью ключевых слов: 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;
}

РЕЗУЛЬТАТ:

radial-gradient(at 0 50px, #def, #7ac, #bdf);

radial-gradient(at 0 100%, #def, #7ac, #bdf);

radial-gradient(at left bottom, #def, #7ac, #bdf);

Размер градиента можно указать в пикселях, процентах (только для 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;
}

РЕЗУЛЬТАТ:

radial-gradient(25px, #def, #7ac, #bdf);

radial-gradient(100px at right, #def, #7ac, #bdf);

radial-gradient(25% 50% at 10% 30%, #def, #7ac, #bdf);

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

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;
}

РЕЗУЛЬТАТ:

radial-gradient(circle closest-side at 30px 20px, #def, #7ac, #bdf);

radial-gradient(closest-side at 30px 20px, #def, #7ac, #bdf);

radial-gradient(circle farthest-side at 30px 20px, #def, #7ac, #bdf);

radial-gradient(farthest-side at 30px 20px, #def, #7ac, #bdf);

Пример 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;
}

РЕЗУЛЬТАТ:

radial-gradient(circle closest-corner at 30px 20px, #def, #7ac, #bdf);

radial-gradient(closest-corner at 30px 20px, #def, #7ac, #bdf);

radial-gradient(circle farthest-corner at 30px 20px, #def, #7ac, #bdf);

radial-gradient(farthest-corner at 30px 20px, #def, #7ac, #bdf);

Так же, как и в линейном градиенте, для точного позиционирования цвета после значения цвета через пробел указывается его положение в процентах, пикселах или других единицах. Крайние единицы (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);
}

РЕЗУЛЬТАТ:

Конический градиент conic-gradient()

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

Пример

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

РЕЗУЛЬТАТ:

conic-gradient(#def, #7ac);

conic-gradient(#def, #7ac, #def);

Центр градиента и начальную точку можно сместить.

Пример

div {
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto;
}
div:nth-of-type(1) {
background: conic-gradient(at 25% 25%, #def, #7ac, #def);
}
div:nth-of-type(2) {
background: conic-gradient(from 45deg, #def, #7ac);
}

РЕЗУЛЬТАТ:

conic-gradient(at 25% 25%, #def, #7ac, #def);

conic-gradient(from 45deg, #def, #7ac);

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

Если точка начала очередного цвета меньше точки конца предыдущего, то цвет начнётся с конечной точки предыдущего.

Пример

div {
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto;
}
div {
background: conic-gradient(#def 0 120deg, #7ac 0 240deg, #bdf 0 360deg);
}

РЕЗУЛЬТАТ:

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

Пример

div {
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto;
}
div {
background: repeating-conic-gradient(#def 0 20deg, #7ac 0 40deg);
}

РЕЗУЛЬТАТ:

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

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

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