Как сделать меш градиент в CSS — Mesh gradient генератор

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

Обычный CSS-градиент — это переход между двумя или несколькими цветами в одном направлении. Меш градиент (его ещё называют сетчатым градиентом) устроен иначе: это несколько радиальных градиентов, наложенных друг на друга с прозрачностью. Каждый «лепесток» расходится из своей точки и плавно растворяется в фоне. Вместе они создают впечатление мягкого цветового тумана без чётких границ.

Главный секрет — функция radial-gradient() со ключевым словом at , которое смещает центр пятна в произвольную точку элемента. Несколько таких слоёв в свойстве background-image и получается живой, «дышащий» фон.

Базовый синтаксис radial-gradient() вы, возможно, уже встречали. Добавив at x% y% , мы говорим браузеру: «Центр этого градиента — не в середине, а вот в этой точке».

/* Обычный радиальный градиент — центр посередине */ 
background: radial-gradient(circle, 
    hsl(200, 80%, 70%) 0px, 
    transparent 60% 
); 
 
/* С at — смещаем центр в левый верхний угол */ 
background: radial-gradient(at 20% 15%, 
    hsl(200, 80%, 70%) 0px, 
    transparent 60% 
);

Обратите внимание: вместо circle мы просто пишем at 20% 15% . Браузер по умолчанию делает форму эллипса, которая аккуратно вписывается в размер элемента — это как раз то, что нужно для меш градиента. Последний аргумент transparent 60% говорит: «К середине радиуса плавно исчезни», — так слои не перекрывают, а дополняют друг друга.

CSS позволяет задать сразу несколько градиентов через запятую в одном свойстве background-image . Слои накладываются сверху вниз: первый в списке — самый верхний. Именно это и создаёт эффект меш градиента.

.mesh-gradient { 
    background-color: hsl(250, 50%, 98%); 
    background-image: 
        radial-gradient(at 15% 20%,  hsl(340, 88%, 80%) 0px, transparent 60%), 
        radial-gradient(at 85% 15%,  hsl(205, 85%, 76%) 0px, transparent 60%), 
        radial-gradient(at 50% 55%,  hsl(272, 75%, 84%) 0px, transparent 60%), 
        radial-gradient(at 10% 85%,  hsl(185, 72%, 74%) 0px, transparent 55%), 
        radial-gradient(at 88% 80%,  hsl(320, 80%, 82%) 0px, transparent 55%); 
}

Здесь пять пятен разных цветов в разных углах и центрах элемента. background-color задаёт базовый цвет подложки — он просвечивает в местах, где все пятна прозрачны. Попробуйте поменять координаты at и цвета hsl() — и вы сразу увидите, как меняется характер фона.

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

Свойство filter: hue-rotate() прокручивает все цвета элемента по цветовому кругу разом. Применив анимацию от 0deg до 360deg , получаем бесконечное плавное переливание — без единой строки JavaScript:

.mesh-gradient { 
    background-color: hsl(250, 50%, 98%); 
    background-image: 
        radial-gradient(at 15% 20%, hsl(340, 88%, 80%) 0px, transparent 60%), 
        radial-gradient(at 85% 15%, hsl(205, 85%, 76%) 0px, transparent 60%), 
        radial-gradient(at 50% 55%, hsl(272, 75%, 84%) 0px, transparent 60%), 
        radial-gradient(at 10% 85%, hsl(185, 72%, 74%) 0px, transparent 55%), 
        radial-gradient(at 88% 80%, hsl(320, 80%, 82%) 0px, transparent 55%); 
 
    animation: mesh-hue 10s linear infinite; 
} 
 
@keyframes mesh-hue { 
    to { filter: hue-rotate(360deg); } 
}

Минус один — все цвета вращаются синхронно, соотношение оттенков не меняется. Зато это работает в любом браузере и не требует ничего лишнего. Скорость регулируется длительностью: 6–8 секунд — заметное движение, 15–20 — едва уловимое мерцание.

Директива @property позволяет браузеру анимировать CSS-переменную как число, а не как строку. Благодаря этому каждое пятно можно «закрутить» в свою сторону с разной скоростью — градиент получается по-настоящему живым:

@property --h1 { syntax: '<number>'; inherits: false; initial-value: 340; } 
@property --h2 { syntax: '<number>'; inherits: false; initial-value: 205; } 
@property --h3 { syntax: '<number>'; inherits: false; initial-value: 272; } 
 
.mesh-gradient { 
    background-color: hsl(250, 50%, 98%); 
    background-image: 
        radial-gradient(at 15% 20%, hsl(var(--h1), 88%, 80%) 0px, transparent 60%), 
        radial-gradient(at 85% 15%, hsl(var(--h2), 85%, 76%) 0px, transparent 60%), 
        radial-gradient(at 50% 55%, hsl(var(--h3), 75%, 84%) 0px, transparent 60%); 
 
    animation: 
        mesh-h1 9s  linear infinite, 
        mesh-h2 13s linear infinite, 
        mesh-h3 7s  linear infinite; 
} 
 
@keyframes mesh-h1 { to { --h1: 700; } } 
@keyframes mesh-h2 { to { --h2: 565; } } 
@keyframes mesh-h3 { to { --h3: 632; } }

Конечные значения больше 360 — это нормально: браузер продолжает считать по кругу, так что 700 это просто 340 плюс полный оборот. Разные длительности (7, 9, 13 секунд) дают некратный цикл — пятна никогда не возвращаются в одно положение одновременно, и градиент выглядит непредсказуемо живым. @property поддерживается во всех современных браузерах начиная с 2023 года.

Не хочется подбирать цвета вручную? Используйте генератор ниже. Каждый клик по «Сгенерировать» создаёт новый меш градиент со случайными пятнами и оттенками. Понравился результат — скопируйте готовый CSS и вставьте в свой проект.

Фон страницы или секции. Самый очевидный вариант. Задаём меш градиент на body или на секцию-герой — и сайт сразу смотрится свежо. Особенно хорошо работает в паре с белой карточкой поверх: контраст подчёркивает оба элемента.

body { 
    background-color: hsl(240, 40%, 98%); 
    background-image: 
        radial-gradient(at 15% 20%, hsl(340, 75%, 80%) 0px, transparent 55%), 
        radial-gradient(at 85% 10%, hsl(200, 70%, 75%) 0px, transparent 55%), 
        radial-gradient(at 50% 90%, hsl(270, 65%, 80%) 0px, transparent 55%); 
    min-height: 100vh; 
}

Карточка или баннер. Меш градиент отлично смотрится как фон карточки с важным контентом — ценой, призывом к действию, иллюстрацией.

.card { 
    background-color: hsl(220, 50%, 97%); 
    background-image: 
        radial-gradient(at 10% 30%, hsl(180, 70%, 75%) 0px, transparent 60%), 
        radial-gradient(at 90% 70%, hsl(300, 60%, 78%) 0px, transparent 60%); 
    border-radius: 16px; 
    padding: 2rem; 
}

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

.avatar { 
    width: 80px; 
    height: 80px; 
    border-radius: 50%; 
    background-color: hsl(220, 40%, 95%); 
    background-image: 
        radial-gradient(at 30% 30%, hsl(40, 90%, 75%) 0px, transparent 60%), 
        radial-gradient(at 70% 70%, hsl(190, 75%, 70%) 0px, transparent 60%); 
}

Не бойтесь прозрачности. Значение transparent 50% в конце каждого пятна — ключевое. Именно оно делает переходы мягкими. Уменьшите до 30% — пятна станут крупнее и ярче. Увеличьте до 70% — компактнее и нежнее. Попробуйте разные значения, чтобы почувствовать разницу.

Фоновый цвет важен. background-color — это не просто заливка на случай, если что-то пойдёт не так. Это «температура» вашего фона. Тёплый светлый цвет ( hsl(40, 30%, 97%) ) даст кремовый оттенок, холодный ( hsl(220, 40%, 97%) ) — голубоватый. Это тонко, но работает.

Пять пятен — хороший минимум. Меньше трёх — будет заметная структура и симметрия, больше восьми — цвета начнут смешиваться в грязный серый или бежевый. Золотая середина — 5–7 пятен.

Ограничьте контрастность. Если поставить рядом очень тёмный и очень светлый цвет, граница получится резкой. В меш градиенте лучше держать светлоту всех пятен в диапазоне 55–80% — тогда переходы будут плавными вне зависимости от оттенков.

Освоив меш градиент, попробуйте добавить к фону лёгкую анимацию через @keyframes : анимируйте background-position или плавно меняйте координаты через CSS-переменные — и фон станет «живым» без единого изображения. Подробно о CSS-градиентах и анимированных фонах — в нашем полном руководстве по CSS-градиентам.