CSS Filter Generator

Об этом инструменте

Генератор CSS-фильтров позволяет визуально настраивать девять функций CSS-фильтров — blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate и sepia — и видеть комбинированный эффект в реальном времени.

CSS-фильтры применяют визуальные эффекты к элементам HTML, аналогичные программному обеспечению для редактирования фотографий. Они используют ускорение GPU и работают с изображениями, фонами, текстом.

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

1. Перетащите любой ползунок для применения фильтра.
2. Комбинируйте несколько фильтров — предпросмотр обновляется в реальном времени.
3. Фильтры со стандартными значениями автоматически исключаются из вывода.
4. Нажмите «Сбросить всё» для возврата к стандартным значениям.
5. Нажмите «Копировать» для копирования CSS-свойства filter.

Случаи использования

Дизайнеры используют grayscale и sepia для монохромных UI-секций. Разработчики используют blur для эффекта матового стекла. brightness часто используется в эффектах наведения. Реализации тёмного режима используют фильтр invert.

Частые вопросы

• В чём разница между filter и backdrop-filter? — filter применяется к самому элементу и всем его дочерним элементам. backdrop-filter применяется только к области за элементом (полезно для оверлеев из матового стекла).
• Можно ли комбинировать несколько фильтров? — Да. Перечислите их через пробел в свойстве filter. Инструмент делает это автоматически.
• Влияют ли CSS-фильтры на производительность? — Простые фильтры вроде grayscale и brightness дёшевы. Blur дороже, особенно на больших областях — используйте его осторожно на мобильных.