⭐ 0
🔍
Текст Изображение PDF и Документи Аудио Музика Електроника Време Полезни програми Валидатори Езотерика Игри

CSS генератор на филтри

Съставете пренареждаща се редица от функциите CSS filter() и backdrop-filter() и я визуализирайте на живо върху собствена качена снимка, с линия CSS за копиране и експорт в PNG.

🔒 Обработва се изцяло във вашия браузър - нищо, което въвеждате тук, никога не се качва.

🖼️

Плъзнете и пуснете изображение тук

или Кликнете, за да прегледате файлове

Качете снимка по-горе, за да видите редицата от филтри тук. Демото с матирано стъкло чрез backdrop-filter работи и без нея.

Обработка... 0%

Резултат

Всеки CSS генератор на филтри ви позволява да наредите blur(), brightness(), contrast() и останалите — но почти никой не позволява редът да има значение, защото повечето прилагат филтрите само в една фиксирана последователност. Тук е различно: редицата от филтри е истински, пренареждащ се списък, изграден с естественото HTML5 влачене и пускане, и разместването на две функции наистина променя пикселите, точно както би станало в продукционен CSS. Размазване-после-завъртане-на-нюанса изглежда различно от завъртане-на-нюанса-после-размазване и вече можете да видите защо, преди да го изпратите.

Качете своя снимка и деветте верижни функции — blur, brightness, contrast, saturate, hue-rotate, sepia, grayscale, invert и drop-shadow — се прилагат на живо върху нея като действителна CSS декларация `filter` на елемент `<img>`, а не като симулирано цветно петно. Добавете функция от падащото меню, влачете реда ѝ нагоре или надолу в списъка, за да промените позицията ѝ в редицата, настройте плъзгача ѝ и визуализацията, както и линията `filter: ...;` за копиране се обновяват при всяко въвеждане. Премахнете стъпка със собствен бутон, намиращ се точно в реда.

Втора, по-малка редица изгражда стойност за `backdrop-filter`, приложена върху насложен панел, разположен над визуализацията, така че можете да видите ефекта на матирано стъкло — техниката зад модерните полупрозрачни навигационни ленти и фон на модални прозорци — без да засягате собствената филтърна редица на подлежащото изображение. Работи дори преди да качите снимка, върху цветния фон-заместител, така че можете да настроите дизайн на матиран панел за секунди.

Когато визуализацията изглежда добре, копирайте CSS направо от полето за изход или експортирайте истинско PNG: същият филтър се подава на свойството `ctx.filter` на контекст Canvas 2D — което използва идентичен синтаксис като CSS свойството `filter` — и платното се превръща в изтеглим файл чрез `canvas.toBlob()`. Експортираното изображение съвпада точно с живата визуализация, защото е произведено от същия филтър, работещ чрез същия изобразяващ примитив. Всичко се случва локално в браузъра ви; снимката ви никога не се качва някъде.

Харесва ли ви този инструмент? Смятате ли този продукт за полезен? Виждате ли потенциал в него и искате ли да го подкрепите?

🛡️
Изпълнява се в браузъра

Вашите файлове и данни никога не напускат това устройство. Обработката е изцяло офлайн. 100% сигурност.

Приети формати и правила

  • Девет верижни филтърни функции — blur, brightness, contrast, saturate, hue-rotate, sepia, grayscale, invert и drop-shadow — всяка със собствен плъзгач и вградена дръжка за влачене.
  • Изображение с жива визуализация и мигновено обновяваща се филтрирана CSS линия за копиране, плюс по-малка редица за backdrop-filter и демо панел за вид „матирано стъкло“.
  • Експортиране в PNG с един клик изобразява качената снимка през абсолютно същия филтър чрез ctx.filter на Canvas 2D, съвпадайки пиксел за пиксел с екранната визуализация.

Основни предимства

✓ Влаченето и пускането за пренареждане е истинско: преместването на филтър по-напред или по-назад в редицата наистина променя изобразения резултат, което генератори с фиксирана последователност не могат да ви покажат.
✓ Живата визуализация работи върху ваша собствена качена снимка вместо върху безлично цветно петно, така че виждате точно как редицата от филтри се държи върху истинско съдържание, преди да изпратите CSS.
✓ Отделна редица за backdrop-filter демонстрира ефекта на матирано стъкло върху насложен панел, а експортирането в PNG вгражда същия филтър в изтеглимо изображение чрез Canvas 2D.

Случаи на употреба

  • • Комбинирайте blur, brightness и hue-rotate върху продуктова снимка, след което преместете hue-rotate преди blur, за да видите точната разлика в изобразяването, преди да приложите CSS-а.
  • • Създайте наслагване за навигационна лента с ефект на матирано стъкло чрез верига от backdrop-filter и копирайте готовия ред с backdrop-filter плюс -webkit- фолбек.
  • • Експортирайте филтриран PNG от качена снимка, който съвпада пиксел по пиксел с прегледа на живо в CSS, без изобщо да качвате изображението на сървър.