Студия CSS-фильтров
Обрабатывайте изображения прямо в браузере без Photoshop: настраивайте размытие, контраст, яркость, насыщенность, инверсию и применяйте стильные пресеты со сплит-сравнением «До / После».
.filtered-image {
filter: contrast(125%) saturate(140%) hue-rotate(15deg) drop-shadow(0 10px 20px rgba(0,0,0,0.3));
transition: filter 0.3s ease;
}Как пользоваться
- Выберите готовый визуальный пресет (Киберпанк, Нуар Ч/Б, Винтаж 1977, Золотой час, Рентген) или настройте ползунки вручную.
- Двигайте ползунок сплиттера на превью влево и вправо, сравнивая оригинал и результат («До / После»).
- Переключайте тестовые фото (пейзаж с закатом, портрет или ночной неоновый город).
- Скопируйте сгенерированное свойство
filter:для использования в стилях сайта.
Как это работает
Как работает свойство filter в CSS?
Свойство filter применяет эффекты постобработки непосредственно на этапе отрисовки страницы силами видеокарты (GPU). Несколько функций можно комбинировать в одной строке через пробел, при этом порядок применения имеет значение: filter: contrast(130%) brightness(105%) hue-rotate(15deg);.
Разница между drop-shadow() и box-shadow
Стандартный box-shadow отбрасывает тень от прямоугольной рамки блока. Фильтр drop-shadow() обтекает прозрачные пиксели PNG-картинок и векторных SVG, создавая естественную тень точно по форме фигуры или силуэта.
/* Естественная тень точно по силуэту прозрачной PNG/SVG */
.transparent-icon {
filter: drop-shadow(0 8px 16px rgba(0,0,0,0.3));
}Анимации фильтров и производительность
Все стандартные фильтры поддерживают плавный transition и @keyframes с частотой 60 кадров/сек. Это идеально для ховер-эффектов (например, плавное проявление цвета из чёрно-белого при наведении курсора).
Частые вопросы
Можно ли применять фильтры к видео или фону?
Да, свойство filter работает с любыми HTML-элементами, включая <video>, <iframe>, веб-камеру в <canvas> и даже целые блоки страницы.
В чем отличие от backdrop-filter?
filter трансформирует сам выбранный элемент, а backdrop-filter обрабатывает область, находящуюся позади него (используется для матового стекла Glassmorphism).
Поддерживаются ли фильтры во всех браузерах?
Да, спецификация CSS Filter Effects Level 1 поддерживается всеми браузерами без префиксов уже более 9 лет (глобальный охват свыше 98%).
