Создать аккаунт
Интерфейсы и CSSРаботает в браузере

CSS Filter Playground

Соберите безопасную CSS filter declaration без загрузки изображений, canvas export или внешних библиотек.

  • 6 filter functions
  • Bounded ranges
  • Live preview
Онлайн-инструмент

Попробуйте инструмент

Добавьте данные, выберите нужные параметры и получите готовый результат.

Исходные данные

Результат

WebDiag
filter: blur(0px) brightness(100%) contrast(100%) grayscale(0%) saturate(100%) hue-rotate(0deg);

Ваши данные остаются здесь

Текст и выбранные файлы обрабатываются в текущем браузере и не отправляются на сервер для получения результата.

Проверено: 2026-07-17
01

Как пользоваться

  1. 1

    Введите значения filter functions.

  2. 2

    Проверьте preview sample.

  3. 3

    Скопируйте готовую filter declaration.

02

Что умеет инструмент

  • blur, brightness, contrast, grayscale, saturate и hue-rotate.
  • Проверка bounded numeric ranges.
  • Plain CSS declaration output.
03

Когда пригодится

  • Прототип hover-state или disabled-state effect.
  • Подбор filter token для UI surface.
  • Быстрая проверка numeric range перед CSS implementation.
04

Что происходит внутри

Output состоит только из фиксированного набора filter functions.

Пользовательский raw CSS не выполняется.

05

Вопросы и ответы

Можно применить filter к загруженному изображению?

Нет. Этот инструмент только генерирует CSS declaration и preview sample.

Почему нет backdrop-filter?

Backdrop-filter зависит от context и compositing, поэтому вынесен из простого bounded tool.