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

Что такое свойство CSS filter?

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

Девять функций фильтра, охватываемых этим инструментом

• blur(px) — размывает элемент с использованием размытия Гаусса. Большие значения размывают больше.
• brightness(%) — масштабирует яркость. 100% не изменяется, ниже затемняет, выше осветляет.
• contrast(%) — масштабирует разницу между светлыми и темными областями. 100% не изменяется.
• grayscale(%) — десатурирует в сторону черно-белого. 100% полностью черно-белое.
• hue-rotate(deg) — поворачивает все оттенки вокруг цветового круга на заданный угол.
• invert(%) — инвертирует цвета. 100% производит эффект фотографического негатива.
• opacity(%) — делает элемент полупрозрачным, как свойство opacity, но как функция фильтра (поэтому может быть объединено с другими).
• saturate(%) — масштабирует интенсивность цвета. Ниже 100% приглушает цвета, выше 100% делает их более насыщенными.
• sepia(%) — смещает изображение в сторону теплого коричневого тона "старая фотография". 100% полностью сепия.

Как использовать этот инструмент

1. Перетащите любой ползунок, чтобы отрегулировать эту функцию фильтра — генерируемый CSS обновляется мгновенно по мере вашей работы.
2. Объедините несколько ползунков для создания многоуровневого эффекта (например, касание sepia плюс усиление contrast для винтажного вида).
3. Оставьте ползунок в его позиции по умолчанию (без изменений), чтобы полностью пропустить эту функцию — инструмент записывает только функции, которые действительно изменяют вывод, сохраняя сгенерированную строку короткой и понятной.
4. Скопируйте сгенерированный CSS из поля CSS или загрузите как файл .css и вставьте его в вашу таблицу стилей или блок <style>. Примените к любому селектору: .my-element { filter: ...; }.

Порядок функций

Когда активно более одного фильтра, этот инструмент всегда записывает их в фиксированном порядке — blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia — соответствуя порядку ползунков в форме. CSS применяет объединенные функции фильтра слева направо, поэтому если вы будете редактировать вывод вручную позже, имейте это в виду: переупорядочение функций может изменить визуальный результат, особенно когда размытие смешивается с цветовыми коррекциями.

FAQ

Почему вывод не содержит каждую функцию фильтра каждый раз? Фильтр, оставленный в нейтральном значении (brightness(100%), blur(0px) и так далее), не изменяет внешний вид элемента, поэтому его включение было бы просто шумом. Этот инструмент опускает функции no-op и возвращается к filter: none; когда каждый ползунок находится в своем значении по умолчанию.

Можно ли анимировать или переходить эти фильтры? Да — filter можно анимировать с помощью CSS transition или @keyframes, что является распространенным способом создания плавных эффектов наведения (например transition: filter 0.2s ease; наряду с правилом :hover, которое переключается на другое значение фильтра).

Влияет ли filter на макет? Нет. Как и transform, filter чисто визуален — он не переформатирует окружающий контент, хотя большое blur может визуально выходить за пределы поля элемента.

Поддерживается ли filter во всех браузерах? Да, непрефиксированный filter полностью поддерживается во всех современных браузерах.

В чем разница между filter: opacity() и свойством CSS opacity? Они отображают один и тот же визуальный результат, но filter: opacity() компонируется с другими функциями фильтра в одной цепи filter, в то время как автономное свойство opacity является отдельным, более простым объявлением. Используйте простое свойство opacity, если вы не объединяете другие фильтры.

Конфиденциальность

Все происходит в вашем браузере. Никакой CSS, значения или параметры, которые вы вводите, никогда не отправляются на сервер — объявление генерируется и обновляется локально по мере регулировки ползунков.