CSS Generator Filtera
Izgradite lanac CSS filter() i backdrop-filter() funkcija s mogućnošću promjene redoslijeda i pregledajte ga uživo na vlastitoj učitanoj fotografiji, s CSS linijom za kopiranje i izvozom u PNG.
🔒 U potpunosti se obrađuje u vašem pregledniku — ništa što ovdje unesete nikada se ne učitava.
Rezultat
Svaki CSS generator filtera vam omogućuje slaganje blur(), brightness(), contrast() i ostalih — ali gotovo nijedan ne dopušta da redoslijed bude važan, jer većina primjenjuje filtere samo u jednom fiksnom slijedu. Ovaj je drugačiji: lanac filtera je prava lista s mogućnošću promjene redoslijeda izgrađena pomoću izvornog HTML5 povlačenja i ispuštanja, a promjena redoslijeda dviju funkcija zaista mijenja prikazane piksele, točno onako kako bi bilo u produkcijskom CSS-u. Prvo zamućenje pa rotacija nijanse izgleda drugačije od prvo rotacije nijanse pa zamućenja, i sada možete vidjeti zašto prije nego što to objavite.
Učitajte vlastitu fotografiju i devet ulančivih funkcija — blur, brightness, contrast, saturate, hue-rotate, sepia, grayscale, invert i drop-shadow — primjenjuju se na nju uživo kao stvarna `filter` CSS deklaracija na `<img>` elementu, a ne kao simulirani uzorak. Dodajte funkciju iz odabira, povucite njen red gore ili dolje po listi da promijenite njen položaj u lancu, podesite klizač, a pregled i linija `filter: ...;` za kopiranje ažuriraju se na svaki unos. Uklonite korak vlastitim gumbom, upravo tu u redu.
Drugi, manji lanac gradi vrijednost `backdrop-filter` primijenjenu na sloj preklapanja postavljen preko pregleda, tako da možete vidjeti efekt mutnog stakla — tehniku iza modernih prozirnih navigacijskih traka i pozadina modala — bez diranja vlastitog lanca filtera temeljne slike. Radi čak i prije nego što učitate fotografiju, naspram šarene pozadinske slike, tako da možete podesiti dizajn mutnog panela u nekoliko sekundi.
Kada pregled izgleda dobro, kopirajte CSS izravno iz okvira s izlazom ili izvezite pravi PNG: isti niz filtera predaje se svojstvu `ctx.filter` konteksta Canvas 2D — koje koristi identičnu sintaksu kao CSS svojstvo `filter` — a canvas se pretvara u datoteku za preuzimanje pomoću `canvas.toBlob()`. Izvezena slika točno odgovara pregledu uživo, jer je proizvedena istim nizom filtera koji se izvodi kroz istu grafičku osnovu. Sve se odvija lokalno u vašem pregledniku; vaša se fotografija nikamo ne učitava.