[Перевод] Grainy Gradients21.12.2023 11:00

Изучая графику на Dribbble или Behance, вы найдёте там дизайнеров, использующих простую технику добавления в изображения текстур: шум. Добавление шума делает сплошные цвета или плавные градиенты, например, тени, более реалистичными. Но несмотря на любовь дизайнеров к текстурам, шум редко применяется в веб-дизайне.

В этой статье мы при помощи CSS и SVG сгенерируем цветной шум, позволяющий добавлять текстуру к градиенту.

Интерактивная песочница

Проще всего разобраться, что происходит, поиграв в песочнице с параметрами, создающими слои.

SVG-шум и CSS-градиенты

Базовая техника, описываемая в этой статье, создана на основе ответа Криса Пахла на вопрос в Stack Overflow:  можно ли добавить шум к CSS-градиенту?

Хитрость заключается в создании шума при помощи SVG-фильтра с последующим использованием этого шума в качестве фона. Подложите под него градиент, увеличьте яркость и контрастность, вот и всё — у вас получился градиент с плавным дизерингом.

Основные ингредиенты

Вот, с чем мы будем работать:

• SVG turbulence:  это наш фильтр шума.

• Фон с градиентом и SVG:  дальше мы добавляем этот фильтр в CSS в качестве фонового изображения, сочетающего фильтр с CSS-градиентом.

• Повышение яркости и контрастности:  затем мы применяем filter CSS, чтобы увеличить яркость и контрастность шума.

• Смешение градиентов:  наконец, можно использовать mix-blend-mode для дальнейшей фильтрации цветов и смешения градиентов.

Давайте подробно рассмотрим каждый из этапов.

Использование SVG turbulence

Работая с SVG, мы можем задавать фильтры, и один из таких фильтров позволяет нам создать шум Перлина. Он называется , для него можно задать атрибуты, например, выбрать, «турбулентность» это или «шум», указать размер зерна. Бенсе Сабо объясняет это гораздо подробнее, демонстрируя, как это можно использовать для создания паттернов.

Этот пример SVG создаёт фильтр и рендерит элемент , который можно использовать для зернистых градиентов. Обратите внимание, что  SVG задаётся отдельно от , а  просто ссылается на него.

Можно поэкспериментировать с изменением некоторых из свойств

Мы сохраним этот SVG как отдельный файл. В используемых в статье демо для получения SVG мы ссылаемся на внешнюю ссылку. Однако на практике вы будете ссылаться на локальный файл или собственную CDN. По какой-то странной причине на SVG нельзя сослаться по его id в CSS, но можно встроить SVG, как мы показали в демо. Мы не применяем этот приём в демо ради повышения читаемости.

Создание CSS-фона при помощи SVG и градиента

После того, как мы сохранили куда-нибудь файл SVG, можно ссылаться на него по URL или пути и использовать его вместе с градиентом в background CSS.

.noise {
/* ... /
background:
linear-gradient(to right, blue, transparent),
url(https://grainy-gradients.vercel.app/noise.svg);
}

Здесь важен порядок. В этом конкретном примере мы хотим, чтобы сплошной цвет (то есть с отсутствующим шумом) переходил в шум, а затем в другой цвет. Также мы хотим, чтобы один конец градиента был прозрачным, чтобы сквозь него был виден шум.

Вот так:

Однако выглядит это не очень красиво, потому что шум слишком размыт. Нам нужно «потрепать» его и сделать более зернистым. И для этого нам понадобится…

Повышение яркости и контрастности

Добавление filter CSS делает шум более очевидным, сдвигая самые тусклые цвета в сторону белого или чёрного. Фильтр применяется ко всему

.noise {
/ ... /
background:
linear-gradient(to right, blue, transparent),
url(https://grainy-gradients.vercel.app/noise.svg);
filter: contrast(170%) brightness(1000%);
}

.noise {
/ ... /
background:
linear-gradient(20deg, rebeccapurple, transparent),
url(https://grainy-gradients.vercel.app/noise.svg);
contrast(170%) brightness(1000%);
}
.overlay {
/ ... /
background: moccasin;
mix-blend-mode: multiply;
}

/* Без изменений */
.isolate {
isolation: isolate;
/* ... /
}