Трюки с фоновыми градиентами: от полос до сложных паттернов

Налей себе кофе, присаживайся. Давай поговорим о боли, которую каждый из нас испытывал хотя бы раз. Прилетает макет от дизайнера, а там — стильная сетка на фоне, тонкие диагональные полосы или сложный геометрический паттерн. Первая мысль разработчика среднего уровня: «Окей, пойду вырежу SVG или экспортирую PNG-шку в 2 КБ и пущу ее репитом».

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

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

Как мы страдали раньше

Вспомни (или содрогнись, если не застал), как мы верстали сложные фоны раньше. В арсенале были только крошечные бесшовные картинки-паттерны размером 4х4 или 10х10 пикселей. Мы прописывали background-repeat: repeat и молились, чтобы у пользователя не дергался глаз от стыков при медленной загрузке страницы.

Когда в CSS завезли первые градиенты, жизнь лучше не стала. Чтобы сделать обычные полосы, приходилось писать адские конструкции с кучей жестких колорстопов:

background: linear-gradient(45deg, #ff0000 25%, #000 25%, #000 50%, #ff0000 50%, #ff0000 75%, #000 75%);

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

Как делать правильно в 2026 году

Современный подход к паттернам на CSS базируется на трех китах:

CSS Custom Properties (кастомные свойства): выносим все цвета, размеры и углы в переменные. Это критически важно, особенно если у тебя на проекте есть темная тема. Подробнее об этом читай в гайде по использованию кастомных свойств для динамического изменения тем.
Множественные фоны (Multiple Backgrounds): мы можем наслаивать градиенты друг на друга, используя прозрачность.
Математика внутри CSS: функция calc() творит чудеса, когда нужно связать размер паттерна с его позиционированием.

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

Давай создадим высокотехнологичную сетку (киберпанк-стиль) с точками на пересечениях. Это частый элемент в современных дашбордах.

Готовый сниппет кода

Вот рабочий, чистый и расширяемый код. Мы используем кастомные переменные для легкой кастомизации сетки:

.tech-grid-bg {
  /* Переменные для быстрой настройки паттерна */
  --bg-color: #0b0f19;
  --grid-color: rgba(99, 102, 241, 0.08); /* Тонкие линии */
  --dot-color: rgba(99, 102, 241, 0.35);  /* Точки на пересечении */
  --grid-size: 50px;
  --dot-size: 3px;

  background-color: var(--bg-color);
  
  /* Стыкуем три градиента: точки, вертикальные линии и горизонтальные линии */
  background-image: 
    radial-gradient(var(--dot-color) var(--dot-size), transparent var(--dot-size)),
    linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
  
  /* Задаем одинаковый размер сетки для всех слоев */
  background-size: 
    var(--grid-size) var(--grid-size),
    var(--grid-size) var(--grid-size),
    var(--grid-size) var(--grid-size);

  /* Сдвигаем точки ровно на перекрестие линий */
  background-position: 
    calc(var(--dot-size) / -2) calc(var(--dot-size) / -2),
    0 0,
    0 0;
}

Частая ошибка новичков

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

Обычно пишут так:

background-image: linear-gradient(to right, #ff0000, transparent);

В чем проблема? Ключевое слово transparent в старых браузерах и некоторых движках рендерится как rgba(0, 0, 0, 0) (прозрачный черный). Из-за этого при переходе от яркого цвета (например, белого или красного) к прозрачному в середине градиента появляется грязная серая зона.

Как правильно: всегда явно указывай цвет, который должен уходить в прозрачность. Вместо transparent пиши цвет с нулевым альфа-каналом:

background-image: linear-gradient(to right, #ff0000, rgba(255, 0, 0, 0));

В современном CSS также круто использовать цветовое пространство oklch или color-mix(), чтобы смешивать цвета без этой серой мертвой зоны. Экспериментируй, выноси параметры в переменные, и твои интерфейсы будут выглядеть дорого и весить ровно ноль байт в графике.

🔥 Больше фишек, готовых сниппетов и передовых подходов к CSS мы публикуем в нашем Telegram-канале. Подписывайтесь, чтобы не пропустить!