Реклама мешает? Идти Без рекламы Сегодня 

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

ЦветРазработчик

Реклама · УДАЛИТЬ?

ВХОД

Автоматический процесс

ВЫХОД

Клиентская сторона

Живой просмотр

Перенесите изображение сюда с помощью перетаскивания или щелкните для выбора

Предустановки

Никто

Классика

Драматический

Прохладный

Теплый

Тон сепии

Высокий контраст

Чёрный

Мечтательный

Увядающий

CSS код

Реклама · УДАЛИТЬ?

Гид

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

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

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

Начните со стандартного демонстрационного изображения или загрузите свое, перетащив изображение в область предварительного просмотра или нажав «Загрузить изображение». Затем отрегулируйте ползунки фильтров для достижения желаемого эффекта. Каждый ползунок управляет различными свойствами CSS-фильтра: размытие, яркость, контрастность, оттенки серого, поворот оттенка, инверсия, непрозрачность, насыщенность и сепия. Вы также можете включить тень с настраиваемыми смещением, размытием и цветом. Попробуйте один из встроенных пресетов, таких как «Винтаж», «Драматический» или «Нуар», для быстрых отправных точек. Когда вы будете удовлетворены, нажмите кнопку «Копировать», чтобы получить CSS-код.

Возможности

Предварительный просмотр изображения в реальном времени – Просмотр изменений фильтра, применяемых к вашему изображению в реальном времени по мере перемещения ползунков
10 свойств фильтра – Полный контроль над размытием, яркостью, контрастностью, оттенками серого, поворотом оттенка, инверсией, непрозрачностью, насыщенностью, сепией и тенью
Предустановленные эффекты – Пресеты в один клик, включая «Винтаж», «Драматический», «Холодный», «Теплый», «Сепия», «Высокая контрастность», «Нуар», «Мечтательный» и «Выцветший»
Загрузка изображения – Загружайте свои изображения с помощью перетаскивания или выбора файла, чтобы просмотреть фильтры на реальном контенте
Вендорные префиксы – Сгенерированный CSS включает -webkit-filter для максимальной совместимости с браузерами
Управление тенью – Точная настройка тени с помощью смещения X/Y, радиуса размытия и палитры цветов
Копирование в один клик – Мгновенно копируйте сгенерированный CSS-код фильтра в буфер обмена
Кнопка сброса – Быстро восстановите все ползунки до значений по умолчанию

Реклама · УДАЛИТЬ?

 Часто задаваемые вопросы

Что такое свойство фильтра CSS и как оно работает?

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

Фильтры CSS ускоряются процессором графического ядра в современных браузерах, поэтому простые фильтры, такие как яркость или контрастность, имеют минимальное влияние на производительность. Однако сложные фильтры, такие как размытие с большими радиусами или применённые к множеству элементов одновременно, могут вызывать потерю кадров, особенно на мобильных устройствах. Для наилучшей производительности применяйте фильтры к минимальному количеству элементов и избегайте анимации размытия на больших областях.
Что отличает фильтр от `backdrop-filter` в CSS?

Свойство `filter` применяет эффекты к элементу и его содержимому, а свойство `backdrop-filter` — только к области позади элемента. Например, `backdrop-filter: blur(10px)` создаёт эффект стеклянного фонаря, размывая всё, что видно через фон элемента, не затрагивая его собственного содержимого.
Какие браузеры поддерживают фильтры CSS?

Фильтры CSS поддерживаются во всех современных браузерах, включая Chrome, Firefox, Safari, Edge и Opera. В Safari для некоторых функций фильтра всё ещё требуется префикс `-webkit-`. Internet Explorer не поддерживает фильтры CSS вообще. Для максимальной совместимости включите как декларацию с префиксом `-webkit-filter`, так и стандартную декларацию фильтра в вашем CSS.