W3Docs

Тема

Русский

CSS-градиенты ​

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

Существует три типа градиентов:

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

Функция linear-gradient создаёт изображение, которое состоит из плавного перехода между двумя или более цветами вдоль прямой линии. Она может иметь начальную точку и направление вместе с эффектом градиента.

Gradients

Синтаксис ​

Синтаксис линейного градиента

css
background-image: linear-gradient(direction, color1, color2, ...);

Сверху вниз ​

По умолчанию линейные градиенты переходят сверху вниз.

Пример линейного градиента сверху вниз: ​

линейный градиент сверху вниз

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 300px;
        background-color: blue; 
        background-image: linear-gradient(#0052b0, #b340b3); 
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

TIP

Мы добавляем background-color для браузеров, которые не поддерживают градиенты.

Слева направо ​

Изменение вращения linear-gradient с указанием направления от левого края к правому.

Пример линейного градиента слева направо: ​

линейный градиент слева направо

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 300px;
        background-color: blue; 
        background-image: linear-gradient(to right, #0052b0 ,#b340b3); 
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Диагональные градиенты ​

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

Пример диагонального градиента: ​

диагональный CSS-градиент

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 300px;
        background-color: blue; 
        background-image: linear-gradient(to bottom right, #0052b0, #b340b3); 
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Использование углов ​

Задайте угол вместо направления, чтобы получить больший контроль над направлением градиента. 0deg создаёт вертикальный градиент, переходящий снизу вверх, 90deg создаёт горизонтальный градиент, переходящий слева направо. Указание отрицательных углов будет выполняться против часовой стрелки.

Пример линейного градиента с заданным углом: ​

линейный градиент с использованием угла

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 300px;
        background-color: blue; 
        background-image: linear-gradient(70deg, #0052b0, #b340b3); 
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Эффект нескольких цветов ​

Цвета CSS-градиента меняются в зависимости от положения, создавая плавные переходы между цветами. Ограничений на количество цветов нет.

Пример линейного градиента с эффектом нескольких цветов: ​

линейный градиент с несколькими цветами

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 300px;
        background-color: blue; 
        background-image: linear-gradient(#f50707, #f56e00,#f7df00, #66f507, #0052b0, #520f41, #ff0856); 
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

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

Пример линейного градиента с несколькими цветами слева направо: ​

линейный градиент с несколькими цветами слева направо

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 300px;
        background-color: blue; 
        background-image: linear-gradient(to right, #f50707, #f56e00,#f7df00, #66f507, #0052b0, #520f41, #ff0856); 
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Пример линейного градиента с несколькими цветами справа налево: ​

линейный градиент с несколькими цветами справа налево

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 300px;
        background-color: blue; 
        background-image: linear-gradient(to left, #f50707, #f56e00,#f7df00, #66f507, #0052b0, #520f41, #ff0856); 
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Прозрачность ​

Градиенты поддерживают прозрачность, поэтому для достижения прозрачного эффекта можно использовать несколько фонов. Для этого можно использовать функцию rgba() для задания цветовых точек. Последний параметр в функции rgba() может быть значением от 0 до 1, которое определяет прозрачность цвета. 0 означает полную прозрачность, 1 — полный цвет.

Пример линейного градиента от полного цвета к прозрачному: ​

прозрачный линейный градиент

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 200px;
        background-image: linear-gradient(to left, rgba(235, 117, 253, 0), rgba(235, 117, 253, 1));
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

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

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

Пример повторяющегося линейного градиента: ​

повторяющийся линейный градиент

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 200px;
        background-color: blue;
        background-image: repeating-linear-gradient(55deg, #d5b6de, #6c008a 7%, #036ffc 10%);
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

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

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

Синтаксис ​

Синтаксис радиального градиента

css
background-image: radial-gradient(shape size at position, start-color, ..., last-color);

Пример радиального градиента с тремя цветами: ​

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

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 250px;
        width: 250px;
        background-color: blue; 
        background-image: radial-gradient( #ff0509, #fff700, #05ff33); 
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Позиционирование цветовых точек радиального градиента ​

Как и линейные градиенты, радиальные градиенты также принимают заданную позицию и абсолютную длину.

Пример цветовых точек с разным интервалом: ​

позиционированные цветовые точки радиального градиента

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 250px;
        width: 250px;
        background-color: blue;
        background-image: radial-gradient( #ff0509 10%, #fff700 20%, #05ff33 80%);
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Позиционирование центра радиального градиента ​

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

Пример радиального градиента с заданным центром: ​

позиционированный центр радиального градиента

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 250px;
        width: 250px;
        background-color: blue; 
        background-image: radial-gradient(at 0% 30%, #ff0509 10px, #fff700 30%, #05ff33 50%); 
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Форма радиального градиента ​

Параметр shape определяет форму радиального градиента. Он может принимать два значения: circle или ellipse. Значение по умолчанию — ellipse.

Пример формы радиального градиента: ​

круговой и эллиптический CSS-градиент

html
<!DOCTYPE html>
<html>
  <head>
    <title> Title of the document</title>
    <style>
      .gradient1 {
        height: 150px;
        width: 200px;
        background-color: blue; 
        background-image: radial-gradient(red, yellow, green);
      }
      .gradient2 {
        height: 150px;
        width: 200px;
        background-color: blue; 
        background-image: radial-gradient(circle, red, yellow, green); 
      }
    </style>
  </head>
  <body>
    <h2>Ellipse:</h2>
    <div class="gradient1"></div>
    <h2>Circle:</h2>
    <div class="gradient2"></div>
  </body>
</html>
Try it Yourself »

Размер радиального градиента ​

В отличие от линейных градиентов, размер радиальных градиентов можно задавать. Возможные значения:

  • closest-corner
  • closest-side
  • farthest-corner(default)
  • farthest-side.

Пример радиальных градиентов с заданным размером: ​

радиальный градиент CSS closest-corner, closest-side, farthest-corner и farthest-side

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient1 {
        height: 150px;
        width: 150px;
        background-color: blue; 
        background-image: radial-gradient(closest-side at 60% 55%, #ff0509, #fff700, #103601); 
      }
      .gradient2 {
        height: 150px;
        width: 150px;
        background-color: blue; 
        background-image: radial-gradient(farthest-side at 60% 55%, #ff0509, #fff700, #103601); 
      }
      .gradient3 {
        height: 150px;
        width: 150px;
        background-color: blue;
        background-image: radial-gradient(closest-corner at 60% 55%, #ff0509, #fff700, #103601); 
      }
      .gradient4 {
        height: 150px;
        width: 150px;
        background-color: blue; 
        background-image: radial-gradient(farthest-corner at 60% 55%, #ff0509, #fff700, #103601); 
      }
    </style>
  </head>
  <body>
    <h2>closest-side:</h2>
    <div class="gradient1"></div>
    <h2>farthest-side:</h2>
    <div class="gradient2"></div>
    <h2>closest-corner:</h2>
    <div class="gradient3"></div>
    <h2>farthest-corner:</h2>
    <div class="gradient4"></div>
  </body>
</html>
Try it Yourself »

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

Функция CSS repeating-radial-gradient() создаёт изображение, которое состоит из повторяющихся градиентов, расходящихся от исходной точки.

Пример повторяющегося радиального градиента: ​

повторяющийся радиальный CSS-градиент

html
<!DOCTYPE html>
<html>
  <head>
    <style>
      .gradient {
        height: 200px;
        width: 200px;
        background-color: blue; 
        background-image: repeating-radial-gradient(#f70000, #f7da00 10%, #005cfa 15%); 
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Конические градиенты ​

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

Синтаксис ​

Конический CSS-градиент

css
background-image: conic-gradient(color1, color2);

Пример базового конического градиента: ​

конический CSS-градиент

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 250px;
        width: 250px;
        background-color: blue; 
        background: conic-gradient(#ff0000, #fff200);
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Позиционирование центра конического градиента ​

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

Пример конического градиента с заданным центром: ​

конический CSS-градиент с заданным центром

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 250px;
        width: 250px;
        background-color: blue; 
        background: conic-gradient(at 0% 50%, red 10%, yellow 30%, #1eff00 60%);
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Изменение угла ​

Угол конического градиента можно повернуть с помощью ключевого слова "from".

Пример конического градиента с повернутым углом: ​

конический CSS-градиент с повернутым углом

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 250px;
        width: 250px;
        background-color: blue; 
        background: conic-gradient(from 35deg, #ff0000, #ffa600, #fcf000, #03ff0f, #be05fc, #ff0095);
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Повторяющийся конический градиент ​

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

Пример повторяющегося конического градиента: ​

повторяющийся конический CSS-градиент

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient {
        height: 250px;
        width: 250px;
        background-color: blue; 
        background: repeating-conic-gradient(from -45deg, red 45deg, orange, yellow, green, blue 225deg);
      }
    </style>
  </head>
  <body>
    <div class="gradient"></div>
  </body>
</html>
Try it Yourself »

Практика ​

Какие типы CSS-градиентов упоминаются на веб-странице?

Считаете ли это полезным?

Предпросмотр dual-run — сравните с маршрутами Symfony на продакшене.