Generator filtrów CSS
Zbuduj łańcuch funkcji CSS filter() i backdrop-filter() z możliwością zmiany kolejności i podglądaj go na żywo na własnym przesłanym zdjęciu, z kopiowalną linią CSS i eksportem do PNG.
🔒 Przetwarzane w całości w Twojej przeglądarce — nic, co tu wpiszesz, nie zostanie nigdy przesłane.
Wynik
Każdy generator filtrów CSS pozwala nakładać blur(), brightness(), contrast() i resztę – ale prawie żaden nie daje znaczenia kolejności, bo większość stosuje filtry tylko w jednej, stałej sekwencji. Ten jest inny: łańcuch filtrów to prawdziwa lista z możliwością zmiany kolejności, zbudowana na natywnym HTML5 drag-and-drop, a przestawienie dwóch funkcji naprawdę zmienia wyrenderowane piksele, dokładnie tak, jak w produkcyjnym CSS-ie. Najpierw blur, potem hue-rotate wygląda inaczej niż najpierw hue-rotate, potem blur – i teraz możesz zobaczyć dlaczego, zanim wyślesz kod.
Prześlij własne zdjęcie, a dziewięć łączonych funkcji – blur, brightness, contrast, saturate, hue-rotate, sepia, grayscale, invert i drop-shadow – zostanie zastosowanych na żywo jako rzeczywista deklaracja CSS filter na elemencie <img>, a nie na symulowanej próbce. Dodaj funkcję z listy wyboru, przeciągnij jej wiersz w górę lub w dół, by zmienić jej pozycję w łańcuchu, dostosuj suwak, a podgląd i kopiowalna linia filter: ...; aktualizują się przy każdej zmianie. Usuń krok za pomocą własnego przycisku, znajdującego się bezpośrednio w wierszu.
Drugi, mniejszy łańcuch buduje wartość backdrop-filter, która jest stosowana do panelu nakładki umieszczonego nad podglądem, dzięki czemu możesz zobaczyć efekt matowego szkła – technikę stojącą za nowoczesnymi półprzezroczystymi paskami nawigacyjnymi i tłami modalnymi – bez dotykania łańcucha filtrów samego obrazu. Działa to nawet przed przesłaniem zdjęcia, na barwnym tle zastępczym, więc możesz dopracować projekt matowego panelu w kilka sekund.
Gdy podgląd wygląda dobrze, skopiuj CSS prosto z pola wyjściowego lub wyeksportuj prawdziwy PNG: ten sam ciąg filtrów jest przekazywany do właściwości ctx.filter kontekstu Canvas 2D – która używa identycznej składni jak właściwość CSS filter – a canvas jest konwertowany do pliku do pobrania za pomocą canvas.toBlob(). Wyeksportowany obraz dokładnie odpowiada podglądowi na żywo, ponieważ został utworzony przez ten sam ciąg filtrów działający w tym samym prymitywie renderującym. Wszystko dzieje się lokalnie w Twojej przeglądarce; Twoje zdjęcie nigdy nie jest nigdzie przesyłane.