Генератор зернистой текстуры (шум) для фонов
Настройте зерно и посмотрите на фоне. SVG использует фильтр feTurbulence и занимает мало байт; PNG — небольшой блок, который повторяется без заметного шва.
Как пользоватьсяПлёночное зерно для фонов
Доступно на: 
Генератор зернистой текстуры (шум) для фонов: для чего нужен
Лёгкий слой зерна придаёт гладким фонам и градиентам вид бумаги или плёнки и маскирует полосы, появляющиеся в мягких градиентах.
Настройте размер зерна, детализацию, прозрачность и режим смешивания и посмотрите результат на тестовом градиенте. Скопируйте CSS с шумом в SVG (фильтр feTurbulence, мало байт и без шва), применённым к псевдоэлементу, или скачайте PNG 128, 256 или 512 px для повторения на фоне.
Как пользоваться
- Настройте зерно, прозрачность и смешивание.
- Проверьте на цветах вашего фона.
- Скопируйте CSS или скачайте PNG.
Когда использовать
- Фон hero-блока с градиентом.
- Карточки с текстурой бумаги.
- Ретро- или плёночный стиль.
Частые вопросы
Для чего нужно зерно?
Лёгкий слой шума убирает пластиковый вид гладких фонов и градиентов, делает картинку более органичной и маскирует полосы, появляющиеся в мягких градиентах (banding).
SVG или PNG?
SVG с feTurbulence занимает мало байт и масштабируется до любого размера, но рисуется браузером и может тормозить на больших анимированных экранах. PNG — небольшой повторяющийся блок, лёгкий для отрисовки. Для статичного фона подходят оба.
Сколько зерна использовать?
Немного. Прозрачность от 5% до 15% уже даёт текстуру, не загрязняя страницу; выше фон начинает походить на зашумлённое фото и мешает читать текст поверх.
Правда бесплатно?
Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.