градиент · 1:1
зерно 3 px
Скачается файл #808080 (50% grey) с плёночным зерном. В Photoshop ставь слой в режим Overlay или Soft Light поверх фото — сила регулируется прозрачностью слоя.
Комплексный коммерческий дизайн — соц. сети, маркетплейсы, портфолио
@popovvitaly
Генератор шума: плёночное зерно и зернистые градиенты в браузере
Этот генератор шума онлайн делает ровно одну вещь, но до конца: даёт вам управляемое зерно и зернистые градиенты, которые считаются прямо в браузере и уходят в файл пиксель в пиксель — без сервера, без очереди, без регистрации и без подписки. То, что вы видите на превью, и есть то, что вы скачиваете.
Зернистые градиенты · фото-шум 50% grey
рендер в браузере. Версия 1.1.0
CSS-код градиента
выделите текст и нажмите Ctrl+C
Как пользоваться генератором шума
Логика одна и та же в обеих вкладках, поэтому освоить инструмент можно с одного захода.
- Выберите вкладку. «Трендовый градиент» — если нужен цветной зернистый фон для сайта, обложки или поста. «Генератор шума» — если нужна серая текстура под наложение в Photoshop.
- Покрутите две главные ручки — Размер зерна и Интенсивность шума. Первая задаёт крупность, вторая — громкость. Это две независимые оси, и именно их сочетание даёт нужный результат: тонкая благородная плёнка получается не «самым мелким зерном», а мелким зерном при низкой интенсивности.
- Посмотрите на превью справа. Оно обновляется на лету. Если результат нравится — жмите «скачать»; если нет — двигайте ползунки дальше или нажмите Новое зерно, чтобы перегенерировать узор, не трогая настройки.
- Скачайте в нужном формате. У градиента три кнопки (CSS / SVG / PNG), у фото-текстуры — одна большая оранжевая под превью. Готово.
Никаких «применить», «рендерить», «подтвердить» между шагами нет: каждое движение ползунка сразу видно на холсте, а файл собирается в момент клика по кнопке скачивания.
Оглавление
Что делает каждая настройка
Разберём подробно, чтобы вы понимали не «куда тыкать», а что именно меняется на картинке.
Размер зерна.
Это не абстрактная «плотность» и не процент от холста — это реальное число физических пикселей, от 0.5 px для тончайшей, почти невидимой плёнки до 48 px для крупного декоративного зерна. Важный момент: число абсолютное и одинаковое везде. Поставили 3 px — получите 3 px и на миниатюре превью, и в файле Full HD, и в файле 2K. Зерно не «растягивается» вместе с разрешением, как это бывает в инструментах, где размер задают долей от картинки. Поэтому на большом холсте зерно не укрупняется и не мыльнится — его просто становится больше по количеству.
Интенсивность шума (0–100%).
Отвечает за то, насколько сильно зерно видно. При 5–12% вы получите деликатную фактуру «на вгляд», при 40% и выше — выраженное, почти агрессивное зерно. Запомните связку: за «почти невидимость» отвечает именно эта ручка, а не размер. Люди часто крутят размер влево до упора и удивляются, что шум всё равно заметен — это потому, что интенсивность осталась высокой.
Цветное зерно (вкладка «Трендовый градиент»).
Тумблер с двумя состояниями. Включён — поверх градиента ложатся RGB-искры, цветной хроматический шум, тот самый «высокое ISO»-настрой. Выключен — зерно становится нейтральным, монохромным: фактура есть, цветового сдвига нет. Переключение честно проходит во все три формата экспорта, а не только в превью.
Монохромный / Цветной (вкладка «Генератор шума»).
Та же логика, но в виде двух кнопок-сегментов. Для изображений и фотографий почти всегда нужен Монохромный: серый лист с нейтральным зерном в режиме Overlay даёт плёночную фактуру без паразитного оттенка. Цветной оставляют под художественные задачи, когда нужен именно хроматический развод по пятнам.
Палитра C1 / C2 / C3 (только градиент).
Три цвета mesh-фона. Менять можно и пикером (квадратик-образец), и напрямую в hex-поле — вписали код, Enter, цвет применился. Фон фоновых свечений интерфейса тоже реагирует на палитру, так что вы сразу видите настроение.
Анимация дрейфа (только градиент).
Тумблер, который оживляет цветные пятна: они медленно перемещаются по холсту. Если включено — эта анимация попадает в скачанный SVG (в Figma и Illustrator она продолжит жить). На CSS и PNG анимации нет по природе форматов — туда уходит статичный кадр.
Разрешение файла (только фото).
Выпадающий список: 1024×768 для веба и соцсетей, 1920×1080 Full HD, 2560×1440 Quad HD / 2K. Это разрешение скачиваемого PNG; превью при этом остаётся удобным и не зависит от выбора.
Новое зерно (seed).
Каждая картинка шума собирается из числа-затравки. Номер показан рядом с кнопкой (чип seed NN). Нажали кнопку — затравка сменилась, узор перегенерировался при тех же настройках размера и интенсивности. Запомнили номер понравившегося зерна — воспроизведёте его когда угодно, хоть через месяц. Это и есть предсказуемость, которой не хватает случайным фильтрам.
Редактируемые значения.
Цифры справа от названий ползунков — это не просто подпись, а поле ввода. Кликнули — увидели чистое число без суффикса, вписали своё, нажали Enter или кликнули мимо — значение применилось к ползунку и превью. Ввод вне диапазона аккуратно клиппится (зерно в рамки 0.5–48 px, интенсивность в 0–100%), бессмысленный ввод откатывается к текущему значению. Удобно, когда нужна точная цифра, а не «поймать ползунком».
Два режима генератора шума
Трендовый градиент — это эстетичный mesh-фон из трёх мягких цветовых пятен с наложенной плёночной фактурой. Задача режима — дать готовый фон за пару кликов. Экспорт здесь тройной, и каждый формат закрывает свой сценарий:
- CSS — масштабируемая строка стилей для вёрстки. Зерно в ней уже запечено в правильном режиме наложения (overlay), оно бесшовное и тянется на любую ширину экрана без видимых швов повтора. Вставили в проект — работает.
- SVG — вектор для Figma и Illustrator со всеми слоями и, если включали, с анимацией дрейфа.
- PNG — растр 1024×1024 для быстрой вставки в презентацию, креатив или обложку.
Генератор шума (50% Grey) — режим для фотографа и ретушёра. Холст превращается в нейтральный серый лист #808080 с накатанным зерном. Дальше всё просто: скачиваете PNG выбранного разрешения, кидаете слоем поверх снимка в Photoshop, ставите режим наложения Overlay или Soft Light, крутите прозрачность слоя. Серый в этих режимах становится «невидимкой» — работают только отклонения от него, то есть само зерно. Поэтому фактура ложится благородно, без сдвига экспозиции и без искажения исходных цветов фотографии. Вам больше не нужно искать «плёнку» на стоках или собирать её руками через фильтры.
Структура шума
Обычные генераторы сыплют ровный песок, где каждая точка одинаково случайна, — и глаз мгновенно читает это как помеху старого телевизора. Здесь алгоритм собран по принципам аналоговой эмульсии, и разница видна сразу.
Во-первых, плотность неравномерна: зёрна сбиваются в мягкие естественные комки и редеют в других местах — как проявитель на реальной плёнке, а не как пиксельная сетка. Во-вторых, у зёрен мягкий край, а не рубленый цифровой квадрат. В-третьих, шум многослойный: крупные пятна плотности задают характер, основной слой даёт фактуру, а сверху лежит еле заметный сверхмелкий «песок», который вы читаете только вглядевшись, — но именно он убирает ощущение стерильности. И наконец, в цветном режиме добавляется лёгкий хроматический развод по пятнам — те самые RGB-искры, которые в фото-программах зовутся color noise и которые свойственны высокочувствительной плёнке.
Всё это процедурное: никаких готовых картинок-подложек, узор рождается из математики прямо у вас в браузере и каждый раз уникален.
Нюансы генератора шума
Обычные генераторы сыплют ровный песок, где каждая точка одинаково случайна, — и глаз мгновенно читает это как помеху старого телевизора. Здесь алгоритм собран по принципам аналоговой эмульсии, и разница видна сразу.
Во-первых, плотность неравномерна: зёрна сбиваются в мягкие естественные комки и редеют в других местах — как проявитель на реальной плёнке, а не как пиксельная сетка. Во-вторых, у зёрен мягкий край, а не рубленый цифровой квадрат. В-третьих, шум многослойный: крупные пятна плотности задают характер, основной слой даёт фактуру, а сверху лежит еле заметный сверхмелкий «песок», который вы читаете только вглядевшись, — но именно он убирает ощущение стерильности. И наконец, в цветном режиме добавляется лёгкий хроматический развод по пятнам — те самые RGB-искры, которые в фото-программах зовутся color noise и которые свойственны высокочувствительной плёнке.
Всё это процедурное: никаких готовых картинок-подложек, узор рождается из математики прямо у вас в браузере и каждый раз уникален.
Структура шума
Несколько вещей, которые не бросаются в глаза на превью, но именно они отличают рабочий инструмент от демо.
Размер в пикселях, а не на глазок. Как сказано выше, зерно привязано к физическим пикселям и не плывёт при смене разрешения файла. Это та самая причина, по которой скачанный 2K выглядит так же чётко, как превью, а не как растянутая миниатюра.
Субпиксель честный — но в файле, не на превью. В зоне меньше 1 px (значения 0.5, 0.7, 0.9) точный субпиксельный расчёт идёт только в момент экспорта: в скачанном PNG зерно будет именно таким тонким, каким вы его задали. На самом превью в этой зоне зерно округляется к целому пикселю устройства — это осознанный компромисс, чтобы интерфейс не тормозил. Чип значения при этом честно показывает вашу настройку (например, 0.5 px), даже если миниатюра выглядит чуть крупнее. Глазом на превью разницу между 0.5 и 1 px всё равно не различить, а точность вы получаете в файле.
Производительность
Без лагов даже на слабом устройстве. Пока вы тащите ползунок, превью рисуется в облегчённом качестве и откликается мгновенно; как отпустили руку — через долю секунды дорисовывается точная версия. Поэтому перетаскивание плавное и на смартфоне, и на старом ноутбуке, а тяжёлый субпиксельный расчёт не мешает крутить настройки.
Приватность
Ни один байт никуда не отправляется: нет загрузки на сервер, нет ожидания в очереди, нет лимитов «N генераций в день». Страница загрузилась один раз — и дальше работает хоть без интернета. Исходники и черновики остаются на вашей машине.
Кому это экономит время
Дизайнерам, Фотографам и Ретушёрам — готовая overlay-текстура вместо возни с фильтрами и поиска стоковых «плёночных» слоёв; монохромный вариант даёт фактуру без цветового сдвига, цветной — более живое настроение высокого ISO. Веб-дизайнерам — трендовый зернистый фон сразу в виде рабочего CSS, который корректно тянется на любой ширине экрана, плюс SVG для макетов. Авторам обложек, превью, постов и презентаций — быстрый эстетичный фон или фактура без подписок на графические пакеты и без навыков в них. И всем, кому важна приватность: ничего никуда не уезжает.
Частые вопросы
Это бесплатно и без регистрации? Да. Инструмент работает целиком в браузере, никаких аккаунтов, лимитов и водяных знаков на самой картинке нет (в имя файла добавляется только текстовый суффикс-подпись).
Куда уходит мой файл и мои настройки? Никуда. Расчёт локальный, запросов на сервер нет — всё остаётся на вашем устройстве.
Чем это отличается от фильтра «Добавить шум» в Photoshop? Тот даёт равномерный цифровой песок. Здесь зерно многослойное и неравномерное — с комками плотности, мягкими краями и микро-песком, то есть ведёт себя как плёнка, а не как помеха. Плюс вы сразу получаете готовую серую текстуру под Overlay нужного разрешения.
Почему при очень мелком зерне превью и файл чуть различаются? На превью в зоне меньше 1 px зерно округляется к целому пикселю ради скорости интерфейса; точный субпиксель считается только при экспорте. Поэтому скачанный файл — всегда точнее миниатюры.
В заключение
Этот генератор шума онлайн — не ещё один фильтр, а законченный мост между «хочу плёночную фактуру или зернистый фон» и готовым файлом в нужном формате. Две ручки размера и интенсивности, честное зерно в физических пикселях, серый лист под Overlay для Photoshop и три формата экспорта для веба — и всё это в один клик, приватно и бесплатно.
Все онлайн-инструменты на сайте доступны на странице https://vitalydsgn.ru/tools
Обновления:
31.07.2026: Версия 1.1.0. Исправления ошибок, багов.
31.07.2026: Версия 1.0.0. Релиз
О сайте
Индивидуальный коммерческий дизайн «под ключ» — соц, сети, уникальные обложки, маркетплейсы и портфолио.
© Copyrights, 2026. Все права защищены