Generátor CSS filtrů
Sestavte přeuspořádatelný řetězec CSS funkcí filter() a backdrop-filter() a živě si ho prohlédněte na vlastní nahrané fotografii, s kopírovatelným CSS řádkem a exportem do PNG.
🔒 Zpracováno výhradně ve vašem prohlížeči – nic, co zde zadáte, se nikdy nenahraje.
Výsledek
Každý generátor CSS filtrů vám umožní skládat blur(), brightness(), contrast() a ostatní – ale téměř žádný nenechá na pořadí záležet, protože většina je aplikuje jen v jedné pevné posloupnosti. Tento je jiný: řetězec filtrů je skutečný, přeuspořádatelný seznam postavený na nativním HTML5 drag-and-drop, a změna pořadí dvou funkcí opravdu změní vykreslené pixely, přesně jako v produkčním CSS. Blur následovaný hue-rotate vypadá jinak než hue-rotate následovaný blur a nyní můžete vidět proč, ještě než to nasadíte.
Nahrajte vlastní fotografii a devět řetězitelných funkcí – blur, brightness, contrast, saturate, hue-rotate, sepia, grayscale, invert a drop-shadow – se na ni živě aplikuje jako skutečná CSS deklarace `filter` na prvku `<img>`, nikoli simulovaná barevná plocha. Přidejte funkci z výběru, přetáhněte její řádek nahoru nebo dolů a změňte tak její pozici v řetězci, upravte posuvník a náhled i kopírovatelný řádek `filter: ...;` se aktualizují při každé změně. Krok odeberete vlastním tlačítkem přímo v řádku.
Druhý, menší řetězec sestavuje hodnotu `backdrop-filter` aplikovanou na překryvný panel umístěný přes náhled, takže uvidíte efekt matného skla – techniku stojící za moderními průsvitnými navigačními lištami a pozadími modálních oken – aniž byste ovlivnili vlastní řetězec filtrů podkladového obrázku. Funguje to ještě před nahráním fotografie na barevném zástupném pozadí, takže návrh panelu z matného skla naladíte během pár sekund.
Když náhled vypadá dobře, zkopírujte CSS přímo z výstupního pole nebo exportujte skutečné PNG: stejný řetězec filtrů je předán vlastnosti `ctx.filter` kontextu Canvas 2D – která používá identickou syntax jako vlastnost `filter` v CSS – a plátno se převede na soubor ke stažení pomocí `canvas.toBlob()`. Exportovaný obrázek přesně odpovídá živému náhledu, protože vzniká stejným řetězcem filtrů běžícím ve stejném vykreslovacím primitivu. Vše probíhá lokálně ve vašem prohlížeči; vaše fotografie není nikdy nikam nahrávána.