Генератор CSS-фильтров (filter) для изображений

Генератор CSS-фильтров (filter) для изображений: для чего нужен

Свойство CSS filter применяет эффекты к фото без редактирования файла. Выберите фото и настройте яркость, контраст, насыщенность, оттенки серого, сепию, оттенок, инверсию, размытие, прозрачность и тень по контуру (drop-shadow).

Начните с одного из готовых фильтров (чёрно-белый, винтаж, холодный, тёплый, блёклый, яркий, ночной), скопируйте CSS или скачайте изображение с применённым фильтром. Опция hover создаёт классический эффект фото, которое возвращается к обычному при наведении мыши, с переходом, учитывающим тех, кто просил меньше движения.

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

1. Выберите фото или используйте пример.
2. Настройте элементы управления или выберите готовый фильтр.
3. Скопируйте CSS или скачайте изображение.

Когда использовать

• Чёрно-белые фото команды.
• Галерея с эффектом при наведении.
• Логотипы с тенью по контуру.

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

В чём преимущество filter перед редактированием фото?

Одно и то же фото подходит для нескольких эффектов, и изменение можно анимировать, например чёрно-белое фото, которое становится цветным при наведении. Не нужно сохранять версию для каждого эффекта.

Важен ли порядок фильтров?

Важен. Фильтры применяются слева направо, и каждый работает с результатом предыдущего. Поэтому сепия с последующим изменением оттенка даёт другой результат, чем в обратном порядке.

В чём разница между drop-shadow и box-shadow?

Box-shadow рисует тень прямоугольника изображения. Drop-shadow, который является фильтром, повторяет контур видимого, поэтому работает с PNG и SVG с прозрачным фоном, как логотипы и вырезки.

Правда бесплатно?

Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.

Похожие инструменты