CSS
генератор
градиента

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

CSS-градиент — это плавный переход между двумя и более цветами, который браузер строит самостоятельно, без использования изображений. Достаточно одного правила в стилях — и фон кнопки, карточки или всей страницы заполняется живым цветовым переходом. Если вы хотите создать градиент онлайн без написания кода вручную, воспользуйтесь нашим генератором CSS-градиентов выше: задайте угол, добавьте цветовые точки и сразу получите готовый CSS-код. В этой статье разберём весь синтаксис — от простого linear-gradient до повторяющихся и конических градиентов.

Синтаксис linear-gradient

Линейный градиент задаётся функцией linear-gradient() в значении свойства background или background-image . Первым аргументом идёт направление, затем перечисляются цветовые точки через запятую:

.element {
    background: linear-gradient(direction, color1, color2, ...);
}

/* Минимальный пример: */
.element {
    background: linear-gradient(135deg, rgb(168, 237, 234), rgb(254, 214, 227));
}

Браузер поддерживает любые CSS-форматы цвета: rgb() , rgba() , hsl() , hex . В примерах ниже используется rgb() , потому что он точно передаёт компоненты цвета и хорошо читается.

Угол задаётся в градусах — 0deg означает снизу вверх, 90deg — слева направо, 180deg — сверху вниз. Диагональные градиенты задаются значениями 45, 135, 225 или 315 градусов.

.gradient-1 { background: linear-gradient(  0deg, rgb(185, 230, 215), rgb(175, 215, 250)); }
.gradient-2 { background: linear-gradient( 90deg, rgb(185, 230, 215), rgb(175, 215, 250)); }
.gradient-3 { background: linear-gradient(135deg, rgb(185, 230, 215), rgb(175, 215, 250)); }

Вместо угла можно использовать ключевые слова: to top , to bottom , to right , to left , а также диагонали — to top right , to bottom left и т.д. Браузер сам вычислит нужный угол, опираясь на реальные размеры элемента.

.gradient-1 { background: linear-gradient(to right,       rgb(177, 196, 255), rgb(220, 190, 255)); }
.gradient-2 { background: linear-gradient(to bottom,      rgb(177, 196, 255), rgb(220, 190, 255)); }
.gradient-3 { background: linear-gradient(to bottom right, rgb(177, 196, 255), rgb(220, 190, 255)); }

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

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

/* Два цвета */
.gradient-1 {
    background: linear-gradient(135deg, rgb(255, 218, 190), rgb(255, 168, 168));
}

/* Три цвета */
.gradient-2 {
    background: linear-gradient(90deg,
        rgb(127, 127, 213),
        rgb(134, 168, 231),
        rgb(145, 234, 228)
    );
}

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

/* Плавный переход с явными позициями */
.gradient-1 {
    background: linear-gradient(135deg,
        rgb(255, 200, 80)  0%,
        rgb(255, 140, 50) 40%,
        rgb(200, 80, 80)  100%
    );
}

/* Резкая граница: одинаковая позиция у двух цветов */
.gradient-2 {
    background: linear-gradient(90deg,
        rgb(185, 230, 215)  0%,
        rgb(185, 230, 215) 50%,
        rgb(175, 215, 250) 50%,
        rgb(175, 215, 250) 100%
    );
}

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

radial-gradient() создаёт переход, расходящийся из центра наружу. По умолчанию форма — эллипс, но добавив ключевое слово circle получите идеальный круг. Центр градиента можно смещать ключевым словом at .

/* Круговой радиальный градиент */
.gradient-1 {
    background: radial-gradient(circle,
        rgb(200, 235, 255),
        rgb(215, 205, 255),
        rgb(255, 215, 220)
    );
}

/* Смещённый центр */
.gradient-2 {
    background: radial-gradient(circle at 30% 40%,
        rgb(255, 175, 123),
        rgb(215, 109, 119),
        rgb(58, 28, 113)
    );
}

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

conic-gradient() — относительно новая функция, поддерживаемая всеми современными браузерами. Переход здесь идёт по кругу вокруг центральной точки, а не по прямой линии. Это открывает возможности для круговых диаграмм, цветовых колёс и декоративных паттернов.

/* Базовый конический градиент */
.gradient-1 {
    background: conic-gradient(
        rgb(168, 237, 234),
        rgb(177, 196, 255),
        rgb(255, 218, 190),
        rgb(168, 237, 234)
    );
}

/* Круговая диаграмма: 60% одного цвета, 40% другого */
.pie-chart {
    border-radius: 50%;
    background: conic-gradient(
        rgb(127, 127, 213) 0% 60%,
        rgb(255, 218, 190) 60% 100%
    );
}

Последний пример — типовая круговая диаграмма средствами чистого CSS без JavaScript и SVG. Значения в процентах задают долю каждого сектора.

Функции repeating-linear-gradient() и repeating-radial-gradient() многократно тайлят градиент по всей площади элемента. Это удобно для создания полосатых и клетчатых фонов без использования изображений или SVG.

/* Диагональные полосы */
.stripes {
    background: repeating-linear-gradient(
        45deg,
        rgb(185, 230, 215),
        rgb(185, 230, 215) 10px,
        rgb(175, 215, 250) 10px,
        rgb(175, 215, 250) 20px
    );
}

/* Решётка через несколько фонов */
.grid-bg {
    background:
        repeating-linear-gradient(0deg,
            transparent,
            transparent 39px,
            rgba(127, 127, 213, 0.2) 39px,
            rgba(127, 127, 213, 0.2) 40px
        ),
        repeating-linear-gradient(90deg,
            transparent,
            transparent 39px,
            rgba(127, 127, 213, 0.2) 39px,
            rgba(127, 127, 213, 0.2) 40px
        );
}

Градиент с прозрачностью

Функция rgba() добавляет прозрачность к любому из цветов. Это особенно полезно, когда нужно плавно «вытянуть» фоновое изображение в сплошной цвет или наоборот — сделать перекрытие с произвольным фоном. Ключевое слово transparent — это сокращение для rgba(0,0,0,0) .

/* Затемнение снизу — подпись поверх фото */
.card__overlay {
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.6) 100%
    );
}

/* Цветной ореол из центра */
.glow {
    background: radial-gradient(circle,
        rgba(168, 237, 234, 0.8) 0%,
        rgba(168, 237, 234, 0)   70%
    );
}

Несколько градиентов на одном элементе

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

/* Два пересекающихся полупрозрачных градиента */
.element {
    background:
        linear-gradient(135deg, rgba(168, 237, 234, 0.6), rgba(254, 214, 227, 0.6)),
        linear-gradient(225deg, rgba(177, 196, 255, 0.6), rgba(220, 190, 255, 0.6));
}

/* Градиент поверх изображения */
.hero {
    background:
        linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.7) 100%),
        url('photo.jpg') center / cover no-repeat;
}

Анимированный градиент

Свойство background-position можно анимировать, если увеличить размер фона через background-size . Это классический способ сделать «живой» градиентный фон с помощью чистого CSS.

.animated-gradient {
    background: linear-gradient(
        270deg,
        rgb(168, 237, 234),
        rgb(177, 196, 255),
        rgb(255, 218, 190),
        rgb(185, 230, 215)
    );
    background-size: 400% 400%;
    animation: gradient-shift 8s ease infinite;
}

@keyframes gradient-shift {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}

Трюк прост: градиент в 4 раза шире/длиннее элемента, а анимация сдвигает позицию фона туда и обратно. Браузер сглаживает переходы между кадрами — получается непрерывное плавное движение цветов.

Разберём несколько типовых задач, где CSS-градиенты применяются чаще всего.

Кнопка с градиентным фоном:

.button {
    background: linear-gradient(135deg, rgb(127, 127, 213), rgb(145, 234, 228));
    color: #fff;
    border: none;
    padding: 0.6em 1.8em;
    border-radius: 6px;
    transition: opacity 0.2s ease;
}
.button:hover {
    opacity: 0.88;
}

Карточка с градиентным заголовком:

.card__header {
    background: linear-gradient(135deg,
        rgb(177, 196, 255) 0%,
        rgb(220, 190, 255) 100%
    );
    padding: 1.5rem;
    border-radius: 12px 12px 0 0;
}

Текст с градиентной заливкой:

.gradient-text {
    background: linear-gradient(135deg, rgb(127, 127, 213), rgb(145, 234, 228));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

Последний приём работает во всех современных браузерах. Свойство background-clip: text обрезает фон по контуру символов, а -webkit-text-fill-color: transparent делает сам цвет текста прозрачным — сквозь него и просвечивает градиентный фон.

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

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

Градиентный фон особенно выигрышно смотрится в сочетании с тенью: элемент получает объём сразу с двух сторон. Подобрать параметры box-shadow для своих карточек и кнопок поможет генератор CSS-теней — там же можно настроить многослойные и внутренние тени. Хотите пойти дальше и сделать мягкий многоцветный фон без чётких границ? Читайте отдельную статью: меш градиент в CSS.