Генератор зернистого градиента

Современные зернистые градиенты без Photoshop

Стиль «зернистый градиент» — плавный градиент, припорошенный едва заметным плёночным шумом — встречается повсюду в современном дизайне: от маркетинговых страниц Linear до десятков премиальных сайтов продуктов. Этот генератор создаёт такой эффект в виде компактного самодостаточного SVG, который масштабируется на любое разрешение и не требует ни одного растрового файла.

Как накладывается зерно

В основе инструмент формирует два слоя в одном SVG. Базовый слой — <rect>, залитый вашим градиентом (линейным или радиальным, 2–5 стопов). Сверху размещается ещё один <rect>, заливка которого — монохромная шумовая текстура, сгенерированная встроенным SVG-фильтром <feTurbulence type="fractalNoise">. Шумовой слой рисуется с настраиваемой непрозрачностью — именно это даёт итоговый мягкий «пыльный» эффект.

Так как всё идёт через SVG-фильтры, зернистый узор остаётся чётким и не повторяется в любом размере — в отличие от тайлового PNG, не будет видимых швов, когда фон растягивается на большую hero-область.

Элементы управления

• Тип — линейный (с регулируемым углом) или радиальный.
• Цветовые стопы — от 2 до 5 цветов с ползунками позиции для точного контроля перехода.
• Интенсивность зерна — непрозрачность шумового слоя. 0 отключает зерно; выше — больше текстуры.
• Масштаб зерна — baseFrequency турбулентности. Низкий масштаб — крупное осязаемое зерно; высокий — плотный плёночный шум.
• Октавы — сколько слоёв шума накладывается. Больше октав = больше деталей.
• Seed — целое число для воспроизводимости. Один и тот же seed = один и тот же узор.

Где использовать

• Hero-фоны с тактильным, не стерильным ощущением
• Сплэш-экраны приложений и карточки в духе iOS-виджетов
• Лаунч-баннеры в стиле Product Hunt
• Обложки музыки и подкастов
• Карточки дашбордов с тонкой глубиной

SVG-вывод всегда чётче JPG при сопоставимом размере файла, а его фильтры аппаратно ускоряются GPU во всех современных браузерах. Скопируйте код, вставьте в <div> и масштабируйте куда угодно — зерно остаётся верным себе на любых устройствах и уровнях зума.