Генератор CSS-фильтров

Выберите основу в галерее и измените параметры ниже. «Сбросить фильтры» возвращает исходные значения, сохраняя ваше изображение. «Убрать изображение» появляется после загрузки своего файла и возвращает пример, сохраняя фильтры. Переключатель светлого и тёмного фона относится только к предпросмотру.

Скопируйте объявление filter в CSS-правило нужного элемента, например .photo. Ссылка сохраняет эффекты, но не загруженный файл. Изображение обрабатывается только в вашем браузере; генератор выдаёт CSS, а не изменённый файл картинки.

Функции выполняются слева направо. Например, grayscale(100%) убирает цвет, blur(4px) размывает, а brightness(120%) увеличивает яркость. В CSS попадают только включённые фильтры, в том числе с нейтральными значениями. Отключение сохраняет настройку для повторного включения; без эффектов получается filter: none.

drop-shadow() строит тень по непрозрачным частям изображения. На картинке с прозрачным фоном она повторяет силуэт; у прямоугольной фотографии — её контур. Размытие и тень могут выходить за границы элемента и обрезаться контейнером с overflow: hidden.

Обычный filter изменяет сам элемент и его содержимое. Размытие фона за стеклянной карточкой относится к другому свойству — backdrop-filter.