CSS Filter Generator от Bennett Feely — простой способ перекрасить изображения без Photoshop - Web-Global: Связывая миры через веб-технологии
Web-Global

CSS Filter Generator от Bennett Feely — простой способ перекрасить изображения без Photoshop

Пост опубликован 14 июля 2025 в 15:53 и находится в рубриках HTML&CSS, Лайф хаки. 5
Поделиться:

Когда тебе нужно перекрасить иконку в определённый цвет, но у тебя только чёрно-белое PNG или SVG изображение — CSS-фильтры приходят на помощь. Но подбирать вручную нужную комбинацию filter: brightness(), sepia(), hue-rotate() и других — это как гадать по звёздам.

Хорошая новость: есть удобный инструмент — CSS Filter Generator от Bennett Feely, который решает эту проблему за пару секунд.

🔧 Что делает CSS Filter Generator?

Он позволяет подобрать максимально близкое значение CSS-фильтра (filter:), которое визуально превратит чёрную иконку в заданный цвет — например, в #16653F или #FF5722.

Ты просто:

  1. Вводишь нужный hex-цвет.
  2. Получаешь готовый CSS filter.
  3. Вставляешь его в свой стиль — и всё работает.

👉 Ссылка: CSS Filter Generator

💡 Когда это полезно?

  • Хочешь использовать одну чёрную иконку и менять её цвет под тему (светлая/тёмная).
  • У тебя нет SVG или доступа к исходному файлу.
  • Нужно окрасить иконку при :hover, :active или другом состоянии.
  • Ты хочешь уменьшить количество файлов и не хранить по 5 цветных версий каждой иконки.

Пример использования

Допустим, у тебя есть чёрная иконка:

<img src="icon.png" class="icon" />

Ты хочешь перекрасить её в #16653F. Вводишь этот цвет в CSS Filter Generator и получаешь, например:

.icon {
filter: brightness(0) saturate(100%) invert(20%) sepia(90%) saturate(600%) hue-rotate(100deg);
}

Цвет будет похож, но не 100% точный — это ограничение CSS-фильтров.

Ограничения

  • Цвет получается примерный, особенно при сложных оттенках.
  • Работает лучше с монохромными иконками (чёрными на прозрачном фоне).
  • Лучше избегать при работе с фото или многоцветными изображениями.

🚀 Альтернатива — использовать SVG

Если ты можешь использовать inline SVG, то лучше менять цвет через fill:

<svg width="24" height="24" fill="#16653F" xmlns="http://www.w3.org/2000/svg">
  <!-- контуры сюда -->
</svg>

📄 Вывод

CSS Filter Generator — это быстрый и удобный способ перекрашивать PNG/SVG-иконки в CSS. Он снижает количество файлов, ускоряет разработку и отлично подходит для UI с динамическими темами.

Если ещё не пробовал — обязательно закладывай в закладки!