CSS градиенты: полное руководство по созданию

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

Базовый синтаксис

Базовый синтаксис свойства background-image (или background) для линейного градиента выглядит так:

linear-gradient(направление, цвет1 [стоп], цвет2 [стоп], ...)

Направление можно указать с помощью ключевых слов to top, to right, to bottom, to left, to top right и т.д., либо в градусах: 0deg (эквивалентно to top), 90deg (эквивалентно to right). Цветовые остановки определяют, где цвет достигает своей полной интенсивности; они могут быть указаны в процентах или пикселях. Если остановка не указана, цвета распределяются равномерно.

Особую мощь линейным градиентам придает возможность создания сложных паттернов, имитирующих полосы, текстуры и даже геометрические фигуры за счет использования резких переходов между цветами. Это достигается указанием для двух соседних цветов одной и той же позиции остановки. Также с помощью прозрачных (transparent) и полупрозрачных (rgba/hsla) цветов можно создавать эффекты наложения и плавного затемнения.

.gradient-panel {
    background-image: linear-gradient(135deg,
        #3b82f6 0%,
        #8b5cf6 33%,
        #ec4899 66%,
        #ef4444 100%
    );
}

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

.striped-bg {
    background-image: linear-gradient(90deg,
        #fff 0px, #fff 20px,
        #4a90e2 20px, #4a90e2 40px
    );
    background-size: 40px 100%;
}

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

Этот тип градиента идеально подходит для создания эффектов свечения, сфер, «пятен света» или фокусировки внимания пользователя на определенной области интерфейса. Их ключевое отличие от линейных градиентов — радиальный характер распространения цвета.

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

radial-gradient([форма] [размер] at [позиция], цвет1 [стоп], цвет2 [стоп], ...)

Форма может быть circle (круг) или ellipse (эллипс, значение по умолчанию). Размер определяется ключевыми словами: closest-side, farthest-side, closest-corner, farthest-corner (последнее является значением по умолчанию).

Также размер можно задать явно в единицах длины: для круга — один радиус (например, 100px), для эллипса — два радиуса по горизонтали и вертикали (например, 100px 50px). Позиция центра задается аналогично background-position (например, at top left, at 30% 70%).

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

.vignette-card {
    --glow-color: 255, 200, 100;  
    background-image:
        radial-gradient(
            ellipse 120% 150% at 50% -20%,
            rgba(var(--glow-color), 0.6) 0%,
            rgba(var(--glow-color), 0.3) 30%,
            transparent 70%
        ),
        radial-gradient(
            circle farthest-corner at 80% 20%,
            #fff 0%,
            #e0e0e0 100%
        );}

Для создания простого кругового градиента, который часто используется в элементах UI, подойдет следующее:

.ui-bullet {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: radial-gradient(circle at center, #ff4757 0%, #c44569 100%);
    border-radius: 50%;
}

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

Этот тип градиента, описанный в спецификации (откроется в новой вкладке)CSS Images Module Level 4, относительно новый, но уже имеет стабильную поддержку в основных браузерах. Их основное применение — создание круговых диаграмм, спиннеров загрузки, цветовых колес и любых элементов дизайна, требующих циклического распределения цвета.

Базовый синтаксис

conic-gradient([from угол] [at позиция], цвет1 [стоп], цвет2 [стоп], ...)

Угол поворота (откуда начинается градиент) задается в градусах (from 0deg), turn (from 0.25turn) или rad. Позиция центра работает так же, как и в радиальном градиенте. Цветовые остановки указываются в процентах или градусах. Важно понимать, что в отличие от линейного градиента, где 0% — это начало линии, в коническом 0% (или 0deg) соответствует положению «12 часов».

Мощь конических градиентов раскрывается при создании точных, программно генерируемых круговых диаграмм без использования JavaScript или SVG. Задавая резкие переходы между цветами (например, #3498db 0% 30%), можно сформировать отдельные секторы. Комбинируя конический градиент с маской или свойством clip-path, можно создавать прогресс-бары в форме круга.

.pie-chart {
    /* Проценты для трех секторов */
    --segment-1: 40;
    --segment-2: 25;
    --segment-3: 35;
    
    width: 200px;
    height: 200px;
    border-radius: 50%;
    
    background-image: conic-gradient(
        #2ecc71 0%,
        #2ecc71 calc(var(--segment-1) * 1%),
        #e74c3c calc(var(--segment-1) * 1%),
        #e74c3c calc((var(--segment-1) + var(--segment-2)) * 1%),
        #3498db calc((var(--segment-1) + var(--segment-2)) * 1%),
        #3498db 100%
    );
}

Для создания простого цветового круга-индикатора можно использовать следующий простой код:

.color-wheel {
    width: 120px;
    height: 120px;
    background-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
    border-radius: 50%;
}

Несмотря на свою новизну, конические градиенты уже не являются экспериментальной технологией и поддерживаются в Chrome, Firefox, Safari и Edge на протяжении последних нескольких версий. Для старых браузеров рекомендуется предоставлять фолбэк (например, сплошной цвет или линейный градиент) с помощью каскада или использовать @supports.

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

Три типа повторяющихся градиентов

1. repeating-linear-gradient(): повторяет линейный шаблон вдоль прямой линии.
2. repeating-radial-gradient(): повторяет радиальный шаблон от центра.
3. repeating-conic-gradient(): повторяет конический шаблон вокруг центра.

Ключевой параметр здесь — длина повторения. Для линейного градиента это расстояние между начальными точками одинаковых фрагментов (например, 20px). Для радиального — радиус, после которого градиент повторяется. Для конического — угол в градусах или процентах (например, 30deg). Если последняя цветовая остановка имеет позицию 0, а первая — больше 0, то градиент будет плавным; если же первая остановка также на 0, а последняя на, скажем, 20px, то будет создан резкий повторяющийся паттерн.

.textured-backdrop {
  --stripe-width: 30px;
  --stripe-color-1: #f8f9fa;
  --stripe-color-2: #e9ecef;
  min-height: 300px;
  width: 90%;
  background-color: var(--stripe-color-1);
  background-image:
    repeating-linear-gradient(45deg,
      transparent,
      transparent calc(var(--stripe-width) - 2px),
      rgba(0, 0, 0, 0.03) calc(var(--stripe-width) - 2px),
      rgba(0, 0, 0, 0.03) var(--stripe-width)),
    repeating-linear-gradient(-45deg,
      transparent,
      transparent calc(var(--stripe-width) - 2px),
      rgba(0, 0, 0, 0.05) calc(var(--stripe-width) - 2px),
      rgba(0, 0, 0, 0.05) var(--stripe-width));
}

.zebra-stripe {
    background-image: repeating-linear-gradient(
        to bottom,
        #5a7247 0px, #5a7247 20px,
        #6b8c52 20px, #6b8c52 40px
    );
}

Повторяющиеся градиенты — это мощный инструмент для создания легковесных, масштабируемых и легко настраиваемых фоновых паттернов. Они отлично поддерживаются браузерами наравне со своими «неповторяющимися» аналогами.

Свойство background-image (а также background) может принимать несколько значений, разделенных запятыми, создавая таким образом стек слоев. Это позволяет накладывать разные типы градиентов друг на друга, комбинируя их с обычными фонами, изображениями и даже с градиентами, созданными с помощью функций element(), image() или url().

Порядок слоев имеет значение: первое значение в списке соответствует верхнему слою, последнее — нижнему. Это похоже на работу с графическими редакторами. Для управления каждым слоем индивидуально используются другие свойства с множественными значениями: background-size, background-position, background-repeat, background-blend-mode. Например, можно создать радиальный градиент, имитирующий светлое пятно, и наложить на него полупрозрачный линейный градиент, создающий общий цветовой тон, а поверх добавить мелкий текстурированный паттерн через repeating-linear-gradient.

Особенно выразительные эффекты получаются при использовании свойства background-blend-mode (режимы наложения). Режимы вроде multiply, screen, overlay или soft-light позволяют градиентам взаимодействовать друг с другом и с фоновым цветом (background-color) нелинейным образом, создавая сложные цветовые взаимодействия, которые трудно рассчитать вручную.

.hero-banner {
  --color1: #8b5cf6;
  --color2: #3b82f6;
  --color3: #06b6d4;
  transform: rotate(-15deg);
  transform-origin: center;
  scale: 1.75;
  min-height: 60vh;
  width: 100%;  
  background-color: #0f172a;
  background-image: radial-gradient(circle at 20% 30%, rgba(var(--color1-rgb), .4) 0, transparent 50%), radial-gradient(circle at 80% 70%, rgba(var(--color2-rgb), .3) 0, transparent 50%), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(0deg, rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(135deg, rgba(15, 23, 42, .9) 0, rgba(30, 41, 59, .8) 50%, rgba(15, 23, 42, .9) 100%);
  background-size: 300px 300px, 300px 300px, 30px 30px, 30px 30px, 100% 100%;
  background-blend-mode: screen, screen, overlay, overlay, normal;
  animation: 15s ease-in-out infinite alternate float;
  --color1-rgb: 139, 92, 246;
  --color2-rgb: 59, 130, 246
}
@keyframes float {
  0% {background-position: 0 0, 100% 100%, 0 0, 0 0, 0 0}
  100% {background-position: -50px -30px, 150px 130px, 15px 15px, 15px 15px, 0 0}
}

.vignette-overlay {
    background-image:
        radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.5) 100%),
        linear-gradient(to right, #667eea, #764ba2);
}

Комбинирование градиентов — это высший пилотаж работы с CSS-фонами. Этот прием позволяет достичь уникального дизайна, избегая тяжелых изображений и сохраняя полный контроль над каждым аспектом внешнего вида элемента прямо в коде.

Несмотря на то, что анимировать сами параметры градиента (угол, позицию центра) напрямую через transition невозможно, существует несколько эффективных обходных путей. Ключевые методы создания динамических градиентов включают анимацию фоновой позиции, фонового размера, кастомных CSS-переменных и использование псевдоэлементов.

Самый распространенный и кросс-браузерный способ — анимировать background-position или background-size для повторяющихся градиентов. Например, анимируя позицию repeating-linear-gradient, можно создать бесконечно движущиеся полосы, имитирующие движение или загрузку. Другой мощный метод основан на CSS-переменных, значения которых можно плавно менять через transition или ключевые кадры @keyframes, и которые используются внутри функции градиента. Это требует объявления градиента в свойстве, поддерживающем анимацию, например, внутри background (но не background-image напрямую).

Для сложных интерактивных эффектов, реагирующих на действия пользователя (например, движение мыши), потребуется небольшое количество JavaScript. Скрипт может вычислять позицию курсора относительно элемента и динамически обновлять CSS-переменные, которые, в свою очередь, изменяют параметры градиента (например, позицию центра радиального свечения).

.animated-button {
  --btn-hue: 210;
  --light-pos: 50% 50%;
  background: radial-gradient(circle at var(--light-pos),
      hsl(var(--btn-hue), 100%, 70%) 0%,
      hsl(var(--btn-hue), 100%, 50%) 30%,
      hsl(var(--btn-hue), 100%, 40%) 70%,
      hsl(var(--btn-hue), 100%, 30%) 100%);
  background-size: 200% 200%;
  transition: --light-pos var(--tr), box-shadow var(--tr), transform var(--tr);
}

.animated-button:hover {
  --light-pos: 80% 20%;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(var(--btn-hue), 50%, 50%, 0.6);
}

.animated-button:active {
  transform: translateY(-1px);
  transition-duration: 0.05s;
}

.cursor-glow {
    --x: 50%;
    --y: 50%;
    background: radial-gradient(circle at var(--x) var(--y), #ffdd00, #ff6b00 50%, transparent 70%);
    /* Остальные стили кнопки */
}

const interactiveBtn = document.getElementById('interactiveBtn');
interactiveBtn.addEventListener('mousemove', function(e) {
    const rect = this.getBoundingClientRect();
    const x = ((e.clientX - rect.left) / rect.width) * 100;
    const y = ((e.clientY - rect.top) / rect.height) * 100;
    this.style.setProperty('--x', x + '%');
    this.style.setProperty('--y', y + '%');
});

Анимация и интерактивность выводят CSS градиенты на новый уровень, превращая их из декоративного элемента в активную часть пользовательского опыта. Эти техники позволяют создавать современные, запоминающиеся интерфейсы.

Однако, при работе с более новыми функциями, такими как конические градиенты (conic-gradient()), или сложными техниками вроде анимации CSS-переменных внутри background-image, важно учитывать матрицу совместимости. Стратегия прогрессивного улучшения становится ключевой: мы проектируем интерфейс, который отлично выглядит и функционирует в современных браузерах, но при этом сохраняет читаемость и удобство использования в устаревших.

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

.simple-pie {
    /* Фолбэк: сплошной цвет для самой большой секции */
    background-color: #2ecc71;
    border-radius: 50%;
}

@supports (background-image: conic-gradient(red, blue)) {
    .simple-pie {
        background-color: transparent;
        background-image: conic-gradient(#2ecc71 0% 40%, #e74c3c 40% 70%, #3498db 70% 100%);
    }
}

Важно помнить о порядке объявления свойств. Всегда объявляйте фолбэк (например, сплошной background-color или простой linear-gradient) перед более сложным правилом. Браузеры, которые не понимают новое значение, проигнорируют его и оставят предыдущее, рабочее. Браузеры, которые понимают, — применят его поверх или вместо (в зависимости от свойства).

Для самых современных возможностей, таких как анимирование градиента через CSS-переменные, @supports может проверять поддержку самих CSS-переменных и background-image с var():

@supports (background-image: var(--test)) {
    /* Стили с использованием CSS-переменных в градиентах */
}

Таблица поддержки основных типов градиентов

Применяя прогрессивное улучшение и грамотно используя @supports, вы можете смело внедрять даже самые современные техники работы с градиентами, не опасаясь сломать интерфейс для части пользователей. Это обеспечивает инклюзивный и устойчивый веб-дизайн.

CSS градиенты эволюционировали из простого декоративного приема в полноценный, мощный инструмент для формирования визуального языка интерфейса. От линейных переходов, задающих общее настроение, до конических, способных визуализировать данные, и анимированных интерактивных фонов — спектр их применения практически безграничен. Понимание нюансов каждого типа, умение их комбинировать и применять стратегию прогрессивного улучшения позволяет создавать не только эстетически привлекательные, но и производительные, доступные и современные веб-сайты. Освоение градиентов — это обязательный шаг для любого frontend-разработчика и дизайнера, стремящегося идти в ногу со временем и использовать всю мощь современных веб-стандартов.

Хотите освоить востребованную профессию и научиться создавать современные сайты? Онлайн-курс «Веб-верстка с нуля до профессионала» даст вам все необходимые знания и навыки для успешной карьеры в веб-дизайне. Вы научитесь не только основам HTML и CSS, но и современным подходам к разработке, что откроет перед вами множество возможностей. Если же у вас уже есть идея для сайта, но нет времени или навыков для его реализации, наша веб-студия с радостью поможет вам создать профессиональный сайт, который будет привлекать клиентов и выделять вас на фоне конкурентов. Не упустите шанс сделать шаг к успеху!