Генератор CSS-фильтров backdrop-filter
Бесплатный онлайн-генератор CSS-фильтров backdrop-filter, не требует установки. Создание эффектов glassmorphism и размытия изображений.
О CSS backdrop-filter
Создавайте CSS backdrop-filter вживую, перетаскивая ползунки девяти функций фильтра: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate и sepia. Вывод включает как backdrop-filter, так и -webkit-backdrop-filter, чтобы эффект работал в современных браузерах, а поверх настраиваемого фона отрисовывается стеклянная карточка, чтобы вы видели результат при настройке.
Как использовать
1. При желании нажмите на пресет (Frosted Glass, Dark Glass, Vintage, Inverted), чтобы начать с подобранного вида. 2. Перетаскивайте ползунки в панели Controls; каждый фильтр появляется в сгенерированном CSS только при отличии от значения по умолчанию (например, brightness/contrast/saturate/opacity по умолчанию 100, blur по умолчанию 0). 3. Редактируйте поле Background любым допустимым значением CSS background (градиент, url изображения, цвет), чтобы протестировать фильтр поверх разных фонов. 4. Нажмите Copy, чтобы скопировать оба объявления backdrop-filter и -webkit-backdrop-filter.
Ползунки фильтров и диапазоны
blur 0–50px; brightness 0–200% (по умолчанию 100); contrast 0–200% (по умолчанию 100); grayscale 0–100%; hue-rotate 0–360deg; invert 0–100%; opacity 0–100% (по умолчанию 100); saturate 0–200% (по умолчанию 100); sepia 0–100%. Reset возвращает каждый ползунок к значению по умолчанию. Фильтры на нейтральном значении опускаются в выводе; если все нейтральны, вывод — backdrop-filter: none.
▶Почему предпросмотр выглядит иначе, чем мой реальный сайт?
▶Включает ли скопированный CSS префикс -webkit-?
▶Почему фильтр отсутствует в моём выводе?
▶Можно ли использовать фоновое изображение вместо градиента?
Если этот инструмент оказался полезным для вас, подумайте о том, чтобы подарить мне кофе.
Купите мне кофе.