Генератор 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.