Генератор backdrop-filter

• 9 настраиваемых регуляторов фильтров: точно настраивайте каждое свойство CSS backdrop-filter — blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate и sepia. У каждого фильтра свой регулятор с точными шагами и мгновенной обратной связью при настройке.
• Живой визуальный предпросмотр: сразу видите результат каждой настройки на примере контента с colourful градиентным фоном. Карточка предпросмотра наглядно показывает, как backdrop-filter преобразует содержимое под элементом, что упрощает подбор идеального вида.
• 6 комбинаций-пресетов: начните дизайн с готовых пресетов — «Мягкое размытие», «Матовое стекло», «Винтаж», «Высокий контраст», «Чёрно-белый» и «Инверсия». Каждый пресет объединяет несколько фильтров и мгновенно даёт популярные визуальные эффекты.
• 100% приватно и бесплатно: вся обработка происходит локально в вашем браузере. Данные не отправляются на сервер, регистрация не нужна, ограничений нет. Сгенерированный CSS можно сразу скопировать в проект — полностью бесплатно навсегда.

• Панели интерфейса из матового стекла: создавайте популярный эффект матового стекла (glassmorphism) для панелей навигации, боковых панелей, модальных окон и карточек. Сочетайте размытие с небольшими настройками яркости и насыщенности ради реалистичного стеклянного вида, добавляющего интерфейсу глубину.
• Читаемость текста поверх фона: улучшайте читаемость текста на насыщенных фонах и изображениях, применяя размытие или настройку яркости за текстовыми слоями. Backdrop-filter сохраняет текст читаемым, не полностью скрывая фон.
• Фоны модальных окон и диалогов: делайте элегантные оверлеи модальных окон с размытием фона содержимого страницы за диалогом. Это концентрирует внимание на модальном окне, сохраняя контекст страницы видимым.
• Закреплённые шапки навигации: применяйте лёгкое размытие фона к закреплённым шапкам и панелям навигации, которые прокручиваются поверх содержимого. Это создаёт изящный полупрозрачный эффект шапки, популярный в современном веб-дизайне, при этом содержимое под ней остаётся видимым.
• Мобильная навигация в виде выдвижной панели: украшайте мобильные боковые панели и нижние шторки эффектами backdrop-filter. Отфильтрованный фон помогает сосредоточиться на навигации, сохраняя ощущение расположения основной страницы под ней.
• Прототипирование UI-компонентов: быстро создавайте прототипы и экспериментируйте с разными комбинациями backdrop-filter на этапе дизайна. Оценивайте, как разные значения фильтров влияют на вид компонентов, до написания продакшн-CSS.

Свойство CSS backdrop-filter позволяет применять графические эффекты — такие как размытие, цветовой сдвиг или изменение контраста — к области за элементом . В отличие от filter , который влияет на сам элемент, backdrop-filter действует на всё, что находится за элементом, что делает его идеальным для стеклянных полупрозрачных поверхностей, где содержимое под ними остаётся частично видимым.

Введённое в модуле CSS Filter Effects Module Level 2, свойство backdrop-filter широко поддерживается современными браузерами, включая Chrome, Firefox, Safari и Edge. Оно стало основой тренда glassmorphism, позволяя создавать многослойные интерфейсы без тяжёлых изображений и сложных обходных решений.

Наш генератор предоставляет визуальный интерфейс для создания CSS backdrop-filter без написания кода. Вот как это работает:

1. Выберите отправную точку — возьмите одну из готовых комбинаций («Мягкое размытие», «Матовое стекло», «Винтаж» и т. д.) или начните с нуля, настраивая отдельные фильтры. Каждый пресет применяет набор значений, рассчитанных на конкретный визуальный эффект.
2. Настройте отдельные фильтры — используйте девять отдельных регуляторов, чтобы независимо настроить каждое свойство фильтра. Активные фильтры отмечены индикатором, а нажатие на подпись значения сбрасывает фильтр к значению по умолчанию. Живой предпросмотр обновляется мгновенно при каждой настройке.
3. Скопируйте CSS — когда результат вас устроит, нажмите кнопку «Скопировать CSS», чтобы скопировать полную декларацию, включая версию с вендорным префиксом для поддержки Safari. Вставьте её прямо в свою таблицу стилей.

• blur(px): применяет гауссово размытие к фону с указанным радиусом в пикселях. Значение 0 означает отсутствие размытия. Обычно используются значения от 2 px (слабо) до 20 px (сильно размыто).
• brightness(%): настраивает яркость фона. 100% — исходное изображение, 0% даёт полностью чёрный результат, а значения выше 100% увеличивают яркость.
• contrast(%): настраивает контраст фона. 100% оставляет изображение без изменений, 0% даёт полностью серое изображение, а значения выше 100% усиливают контраст.
• grayscale(%): переводит фон в оттенки серого. 0% — полный цвет, 100% — полностью чёрно-белое изображение. Промежуточные значения управляют интенсивностью обесцвечивания.
• hue-rotate(deg): применяет поворот оттенка к фону. 0deg оставляет изображение без изменений, 360deg — полный оборот по цветовому кругу.
• invert(%): инвертирует цвета фона. 0% оставляет изображение без изменений, 100% полностью инвертирует цвета. 50% даёт нейтральный серый.
• opacity(%): управляет прозрачностью фона. 100% — полностью непрозрачный, 0% — полностью прозрачный. Учтите, что это влияет только на фон, а не на сам элемент.
• saturate(%): настраивает насыщенность фона. 100% оставляет изображение без изменений, 0% — полностью обесцвечивает, а значения выше 100% дают перенасыщенные цвета.
• sepia(%): применяет к фону сепию. 0% оставляет изображение без изменений, 100% — полностью сепия, создавая тёплый эффект ретро-фотографии.

Ваша приватность — наш приоритет. Генератор backdrop filter обрабатывает всё локально в вашем браузере с помощью CSS-рендеринга, встроенного в движок браузера. Данные не отправляются на сервер — ваши комбинации фильтров и содержимое предпросмотра никогда не покидают устройство. Инструмент полностью бесплатный, без регистрации, ограничений на использование и скрытых условий. Смело используйте его в личных проектах, коммерческих сайтах и работе для клиентов.