a11y.skipToMainContent
1

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

Наберите в CSS фильтры изображений визуально и скопируйте свойство фильтра — предварительный просмотр образца или собственного изображения.

Presets

Filters

px
%
%
%
deg
%
%
%
%

Preview subject

Preview

🌈

CSS

Was this tool helpful?
Send Image to:
Advertisement

How to use CSS Filter Generator

  1. Перетащите ползунки для размытия, яркости, контрастности и других функций фильтра для создания эффекта.
  2. Необязательно включите drop-shadow и установите его смещение, размытие и цвет.
  3. Нажмите «Использовать образец» или загрузите собственное изображение для предварительного просмотра фильтра на реальном контенте.
  4. Нажмите Copy CSS, чтобы захватить сгенерированный фильтр.

Что такое имя?

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

Каждое изменение мгновенно обновляет предварительный просмотр в реальном времени. Проверьте встроенный цветной образец или загрузите свое собственное изображение, чтобы увидеть, как фильтр выглядит на реальном контенте, прежде чем отправлять его. Изображение остается на вашем устройстве — на сервер ничего не загружается. Начните с предустановки, такой как винтажный, B & W, теплый, холодный, драматический или размытый фокус, чтобы быстро приблизиться, а затем настроить. Когда он выглядит правильно, скопируйте однострочную декларацию filter прямо в таблицу стилей.

Advertisement

FAQ

Что делает свойство фильтра CSS?
фильтр применяет графические эффекты, такие как размытость, яркость, контрастность, серый масштаб, вращение оттенка и теневую тень к элементу перед его визуализацией. Вы можете объединить несколько функций в одной декларации, и они применяются в порядке их перечисления.
Мое загруженное изображение отправлено куда-нибудь?
Нет. Изображение загружается локальным URL-адресом объекта исключительно для предварительного просмотра и никогда не покидает браузер. Весь инструмент работает на стороне клиента, поэтому ваши файлы остаются конфиденциальными на вашем устройстве.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 CSS Filter Generator on Wikipedia·Developer Tools on Wikipedia·CSS Filter Generator on Britannica

People also use

← Back to Developer Tools · All tags

Last updated:

Advertisement