Softonic

Генератор текстуры шума

Шаг 1 / 2
Далее

Немного шума скрывает бандинг, смягчает плоские цветовые заливки и делает градиенты интерфейса менее стерильными. Этот генератор создаёт квадратную бесшовную текстуру шума с помощью SVG-фильтра feTurbulence: вы настраиваете цвет фона, прозрачность шума, частоту зерна и тип шума, а на выходе получаете готовый CSS, то есть цвет фона плюс встроенный SVG в виде data URI, который можно сразу вставить в таблицу стилей.

Как создать текстуру шума

  1. 1

    Выберите цвет фона

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

  2. 2

    Задайте прозрачность

    От едва заметного шума (2-5%) до плотного плёночного зерна (25% и выше). Для интерфейсов почти всегда выигрывает сдержанный вариант.

  3. 3

    Настройте частоту

    Чем выше базовая частота, тем мельче и плотнее зерно; чем ниже, тем крупнее и мягче пятна.

  4. 4

    Выберите тип шума

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

  5. 5

    Скопируйте CSS

    На выходе получается цвет фона и встроенный SVG в виде data URI, готовый к вставке в вашу таблицу стилей.

Шум в SVG с помощью feTurbulence

Самый компактный способ добавить шум: SVG и фильтр турбулентности.

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <filter id="n">
    <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch" />
  </filter>
  <rect width="100%" height="100%" filter="url(#n)" opacity="0.3" />
</svg>

Встройте его как background-image: url("data:image/svg+xml,..."), и вы получите несколько сотен байт разметки, которая замостит любую поверхность и не потребует лишнего HTTP-запроса.

Рекомендуемые настройки по сценариям

Сценарий Прозрачность Базовая частота Тип шума
Панели интерфейса в тёмной теме 3-5% 0,8-1,0 Фрактальный шум
Наложение поверх градиента в шапке 5-10% 0,7-0,9 Фрактальный шум
Карточка с эффектом бумаги 8-15% 0,6-0,8 Фрактальный шум
Фото с плёночным зерном 15-25% 0,9-1,2 Фрактальный шум
Зерно ретропостера 25-40% 0,4-0,6 Турбулентность

Замечания о производительности

  • В большинстве браузеров SVG-турбулентность обходится без GPU. Она работает в CSS-фонах и дёшево перерисовывается.
  • Используйте одну плитку. Генератор выдаёт плитку 200 x 200 с stitchTiles="stitch", поэтому на большом экране повторы незаметны.
  • Не анимируйте шум. feTurbulence плохо анимируется без изменения baseFrequency, а на долгих сессиях производительность резко падает.
  • Накладывайте шум на градиенты. Зерно с прозрачностью 10% поверх CSS-градиента даёт куда более живую поверхность, чем градиент сам по себе.

Часто задаваемые вопросы

Всякий раз, когда крупная плоская заливка или градиент выглядят слишком стерильно. Первые экраны, фоны модальных окон и тёмные панели интерфейса становятся объёмнее с шумом 3-10%. Не используйте его под текстом: он ухудшает читаемость.

В SVG-фильтре feTurbulence значение type="turbulence" берёт абсолютную величину шума Перлина (выше контраст, облачный рисунок), а type="fractalNoise" использует знаковые значения (мягче, естественнее зерно). Для интерфейсов почти всегда нужен фрактальный шум.

Нет. Генератор выдаёт встроенный SVG в виде data URI размером несколько сотен байт прямо в CSS, поэтому нет ни файла изображения, ни дополнительного запроса. К тому же он масштабируется на любую поверхность без пересчёта пикселей.

Да. На дисплеях с 8 битами на канал градиенты при низком контрасте дают заметные полосы. Слой шума 2-3% размывает переход дизерингом и убирает полосы и на телефонах, и на мониторах.

Сопутствующие инструменты

Справочная таблица ASCII

Полная таблица ASCII от 0 до 127 с десятичным, шестнадцатеричным, восьмеричным и двоичным представлением, а также записью числовых ссылок HTML, включая NUL, LF и DEL.

Справочник символов HTML

Справочник HTML-сущностей с поиском, их именованными и числовыми кодами, а также копированием специальных символов и знаков одним кликом.

Справочник сочетаний клавиш

Ищите документированные сочетания по умолчанию для VS Code, Chrome и Bash с GNU Readline в macOS, Windows и Linux.

Конвертер CMYK в RGB

Преобразуйте проценты CMYK в приблизительные значения RGB и Hex для быстрого экранного предпросмотра по стандартной формуле.

Шпаргалка по Markdown

Практический справочник Markdown с настоящим предпросмотром и готовыми для копирования примерами заголовков, списков, таблиц, кода, ссылок, изображений и синтаксиса GFM.

Генератор случайных букв

Генерируйте случайные буквы A-Z. Выберите количество, верхний или нижний регистр либо смешанный вариант для игр, заданий и уроков.

Инструмент доступен на других языках