Многослойные фоны на чистом CSS
Лаборатория градиентов
Фон, который выглядит дорого, почти никогда не один градиент. Это два-три полупрозрачных слоя с разными режимами наложения и блюром поверх сплошной подложки: один слой читается как заливка, стопка — как свет, упавший на поверхность. Здесь 224 таких стопок, и каждую можно разобрать по слоям: поменять режим, блюр, прозрачность, добавить зерно. На выходе не картинка, а код — под Tailwind v4, обычный CSS, переменные или объект для CSS-in-JS. Отдельно показываем контраст заголовка и текста поверх выбранного фона: красивый фон, на котором не читается подпись, в вёрстку не годится. Всё считается в браузере, ничего не загружается.
Заголовок поверх фона
Основной текст, которым обычно набирают абзац под заголовком.
Считается по сплошной подложке фона. Слои сверху меняют картинку местами, поэтому число это ориентир, а не приговор: смотрите ещё и глазами.
screen · radial-gradient(ellipse 85% 75% at 20% 16%, rgba(255,107,53,0.92…
screen · radial-gradient(ellipse 70% 80% at 84% 82%, rgba(255,40,0,0.70) …
overlay · linear-gradient(200deg, rgba(255,200,150,0.18) 0%, transparent 4…
{/* Codearia Ember — Tailwind v4, arbitrary values, no config needed */}
<div className="relative isolate overflow-hidden [background-color:#0a0a0a]">
{/* layer 1 */}
<span className="absolute inset-0 [background-image:radial-gradient(ellipse_85%_75%_at_20%_16%,_rgba(255,107,53,0.92)_0%,_rgba(255,72,20,0.34)_42%,_transparent_72%)] [mix-blend-mode:screen] [filter:blur(122px)]" />
{/* layer 2 */}
<span className="absolute inset-0 [background-image:radial-gradient(ellipse_70%_80%_at_84%_82%,_rgba(255,40,0,0.70)_0%,_rgba(140,24,0,0.26)_48%,_transparent_76%)] [mix-blend-mode:screen] [filter:blur(166px)]" />
{/* layer 3 */}
<span className="absolute inset-0 [background-image:linear-gradient(200deg,_rgba(255,200,150,0.18)_0%,_transparent_46%,_rgba(0,0,0,0.50)_100%)] [mix-blend-mode:overlay]" />
<div className="relative">{children}</div>
</div>Категория «Фирменные» — наша. Остальные 206 фонов — из открытого проекта Aura (CristianOlivera1), лицензия MIT. github.com/CristianOlivera1/Aura
Красивый градиентный фон для сайта на чистом CSS
Выберите фон из 224 готовых, разберите его по слоям и заберите код. Каждый фон собран из двух-трёх полупрозрачных слоёв с режимами наложения и блюром, поэтому выглядит как свет, а не как заливка. Экспорт идёт в Tailwind v4, обычный CSS, переменные или CSS-in-JS. Контраст текста поверх фона считается сразу.
Как пользоваться
- 1Выберите фон в галерее или отфильтруйте по категории и настроению
- 2Откройте слои и покрутите режим наложения, блюр и прозрачность
- 3Скопируйте код в нужном формате и проверьте контраст заголовка
Что внутри
- Фонов в каталоге
- 224
- Категорий
- 9: фирменные, аура, сетка, туманность, призма, решётка, зерно, стекло, поток
- Форматы экспорта
- Tailwind v4, CSS, переменные, CSS-in-JS
- Технология
- Чистый CSS: несколько слоёв, mix-blend-mode и blur
- Зависимости
- Нет: ни канваса, ни WebGL, ни картинок
- Где считается
- В браузере, без загрузки на сервер
Частые вопросы
Почему один градиент выглядит дёшево, а эти нет?
Один linear-gradient даёт плоскую заливку: глаз сразу читает переход и теряет интерес. Здесь каждый фон собран из нескольких полупрозрачных слоёв, наложенных друг на друга в режимах вроде soft-light и hard-light, да ещё и размытых. Слои перемешиваются, и получается не переход между двумя цветами, а свет на поверхности.
Это тормозит страницу?
Нет. Ни канваса, ни WebGL, ни картинок: всё рисует сам браузер обычными правилами CSS. Единственное, за чем стоит следить, это большие значения blur на мобильных, потому что размытие считает GPU. В экспорте блюр для полноэкранного фона и для карточки отличается.
Можно ли положить текст поверх такого фона?
Иногда да, иногда нет, и это видно только замером. Инструмент показывает контраст заголовка и основного текста на выбранном фоне числом. Если фон красивый, но подпись на нём не читается, в вёрстку он не годится, каким бы он ни был.
Откуда взялся каталог?
Из двух частей. 206 фонов — из открытого проекта Aura под лицензией MIT, автор CristianOlivera1; ссылка на первоисточник стоит в подвале инструмента. Ещё 18 собраны нами в палитре Codearia и лежат в категории «Фирменные» первыми в галерее. Экспорт под Tailwind v4, промт для агента, проверка контраста и сам интерфейс — наши.
