devpack
EnglishEspañolPortuguêsBahasa IndonesiaFrançaisРусскийDeutschTiếng Việt
Аудит сайта

CSS-генератор фильтров — эффекты изображений и цвет в фильтр

Настройте blur, brightness, contrast, saturation, hue, grayscale, sepia, invert и drop shadow для примера или своего изображения и скопируйте CSS-свойство filter. Нужна SVG- или PNG-иконка в фирменном цвете? Цвет в фильтр превращает любой HEX-цвет в фильтр, который перекрашивает чёрные иконки.

Обновлено
Превью изображения

CSS


  

  


    
 Ваши данные никогда не покидают ваш компьютер. Вся обработка выполняется на 100% локально в вашем браузере.
Был ли этот инструмент полезен?0.0 Оценок: 0

    
    
    Бесплатный конвертер цветов онлайнHEX в RGB, HSL, HWB, OKLCH, CMYK и названия CSS-цветов.Конвертер цветов →
    
    

      
Как пользоваться: CSS-генератор фильтров
  1. Эффекты изображения: двигайте ползунки (или выберите пресет) и смотрите на превью. Нажмите Использовать моё изображение, чтобы применить эффект к своей фотографии — она остаётся на вашем устройстве.
  2. HEX-цвет в фильтр: введите цвет, например #4f46e5. Инструмент подберёт filter, который превращает чёрную иконку в этот цвет.
  3. Скопируйте CSS и примените его к <img>, SVG или любому элементу.


Функции CSS-фильтров


ФункцияЭффектПо умолчанию


blur(4px)Гауссово размытие0


brightness(120%), contrast(110%)светлее/темнее, больше/меньше контраста100%


saturate(150%), grayscale(100%)больше/меньше цвета100%, 0


hue-rotate(90deg)сдвиг всех цветов по цветовому кругу0deg


sepia(60%), invert(100%)теплый коричневый тон, негатив0


drop-shadow(0 8px 12px #0006)тень, которая повторяет прозрачность изображениянет




Фильтры применяются по порядку, слева направо, поэтому grayscale(100%) sepia(60%) даёт не тот же результат, что обратный порядок.


Перекраска иконок с помощью фильтра
Нельзя задать color для <img src="icon.svg">, но можно применить фильтр. Начиная с черного, цепочка вида invert() sepia() saturate() hue-rotate() brightness() contrast() может дать почти любой цвет. Этот инструмент подбирает значения с наименьшей заметной разницей. Если вы контролируете SVG, проще использовать fill="currentColor" — это может сделать за вас оптимизатор SVG.
Также ищут как: hex в css filter, css filter цвет, изменить цвет svg css filter, filter brightness contrast, черный в цветной css filter.
Инструменты, которые хорошо сочетаются с CSS-генератор фильтров
  • Конвертер цветов — Вставьте любой CSS-цвет — HEX, rgb(), hsl(), hwb(), oklch() или название вроде tomato — и сразу получите все остальные форматы, а также готовую палитру 50–950.
  • Генератор border-radius — Скруглите углы любого блока: перемещайте один ползунок для всех углов или задайте каждый угол отдельно, переключитесь на эллиптические углы для форм капли и листа и скопируйте самый короткий корректный CSS-код border-radius.
  • Генератор box-shadow — Добавляйте несколько слоёв теней, меняйте смещение, размытие, spread и непрозрачность на живой карточке, затем скопируйте CSS для box-shadow или text-shadow.
  • Генератор CSS-градиентов — Создайте градиент визуально: перетаскивайте цветовые стопы, меняйте угол или тип, начните с готового пресета — и скопируйте готовый CSS с запасным сплошным цветом.
Часто задаваемые вопросы
Как изменить цвет SVG- или PNG-иконки с помощью CSS?
Если иконка чёрная, используйте «HEX-цвет в фильтр»: введите нужный цвет и примените сгенерированный фильтр к img. Для встроенных SVG задайте fill="currentColor" и используйте CSS-свойство color.
Почему цвет фильтра не точный?
Фильтры могут только приблизительно воспроизводить некоторые цвета. Инструмент показывает разницу; запустите поиск повторно для более точного совпадения. Результаты с отметкой “Perfect” глазом не отличить.
Работают ли CSS-фильтры на любом элементе?
Да — на изображениях, видео, SVG, тексте и целых секциях. Учтите, что фильтры создают новый контекст наложения и могут влиять на производительность на очень больших областях.
В чём разница между box-shadow и drop-shadow?
box-shadow повторяет прямоугольник элемента; filter: drop-shadow повторяет видимые пиксели, поэтому тень огибает прозрачные PNG и SVG-формы.
Можно ли установить CSS-генератор фильтров как веб-приложение и пользоваться им офлайн?
Да. CSS-генератор фильтров — это веб-приложение (PWA), которое можно установить из браузера, без скачивания из магазина приложений. В Chrome или Edge (Windows, macOS, Linux, ChromeOS) или на Android нажмите вверху этой страницы «Установить приложение»; на iPhone и iPad используйте «Поделиться → На экран «Домой»», а в Safari 17+ на Mac — «Файл → Добавить в Dock». После этого приложение откроется в отдельном окне со своим значком, и так как оно полностью работает в браузере, оно продолжит работать офлайн. Firefox на компьютере не умеет устанавливать веб-приложения. Как работает установка.

      
    

    
    
Похожие инструменты
localКонвертер цветовВставьте любой CSS-цвет — HEX, rgb(), hsl(), hwb(), oklch() или название вроде tomato — и сразу получите…localГенератор border-radiusСкруглите углы любого блока: перемещайте один ползунок для всех углов или задайте каждый угол отдельно,…localГенератор box-shadowДобавляйте несколько слоёв теней, меняйте смещение, размытие, spread и непрозрачность на живой карточке,…localSVG ОптимизаторОчистите SVG, экспортированные из Figma, Illustrator, Inkscape или Sketch, с помощью SVGO. Затем сравните…localГенератор CSS-градиентовСоздайте градиент визуально: перетаскивайте цветовые стопы, меняйте угол или тип, начните с готового…localСжатие изображенийУменьшите фото и графику до 90% без заметной потери качества — всё зависит от изображения и настроек.…