Градиенты в интерфейсах 2025: от фона к управляемому светотеневому узору

Разбор задачи

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

CSS-блок в шаблоне

.hero-gradient {
  background: radial-gradient(
      circle at 20% 0%,
      rgba(118,75,245,0.35),
      transparent 58%
    ),
    linear-gradient(135deg, #0f172a, #1e293b 45%, #334155);
  color: #f8fafc;
}

Размер паттерна и точки монтирования градиента лучше привязать к CSS‑переменным темы, чтобы не дублировать hex в десяти местах главного style.css.

Замечания перед выкладкой

Вносите правки только через среду с бэкапом и понятным diff. Если сниппет идёт в шаблон на Битрикс, проверьте конфликт с уже подключённым jQuery/UI и включите «отложенный» запуск там, где длинный главный файл может обрезать DOMContentLoaded.