Generator filtrów CSS
Utwórz deklarację filtru CSS lub backdrop-filter z wizualnych kontrolek.
Generator filtrów CSS
To narzędzie tworzy gotową do wklejenia deklarację filtru CSS (lub backdrop-filter) z wizualnych kontrolek, więc nie musisz pamiętać składni łączenia rozmycia, jasności, kontrastu, skali szarości, rotacji odcienia, inwersji, przezroczystości, nasycenia, sepii i drop-shadow w jedną właściwość. Jest przeznaczone dla każdego, kto stylizuje galerię zdjęć, efekt najechania myszą, panel ze zmrożonym szkłem lub tematyczną obróbkę obrazu bez ręcznego wpisywania listy funkcji filtrów.
Każda funkcja ma własne pole, a wygenerowana wartość zawiera tylko te, które faktycznie zmieniłeś — więc strona z małym rozmyciem pozostaje krótka zamiast zawierać dziewięć funkcji bez operacji. Pole kolejności funkcji kontroluje kolejność, w której się uruchamiają, ponieważ filtry CSS stosuje się od lewej do prawej, a zmiana ich kolejności (rozmycie przed lub po dostosowaniu kontrastu na przykład) może zmienić ostateczny wygląd. Dwie szablony, vintage i czarno-biały, ustawiają całą grupę wartości na raz dla typowego wyglądu. Przełącz "backdrop-filter", aby filtrować to, co jest za elementem, zamiast samego elementu — standardowy wybór dla paneli glassmorphism — i przełącz format wyjścia, aby uzyskać klasę Tailwind zamiast zwykłej linii CSS.
Pola numeryczne są automatycznie ograniczone do rozsądnych zakresów, więc przypadkowa duża lub ujemna wartość nigdy nie zepsuje wyjścia; pole koloru drop shadow przyjmuje dowolną wartość koloru CSS. Wynik aktualizuje się na bieżąco w miarę dostosowywania dowolnej opcji, a licznik nad wyjściem pokazuje, ile funkcji jest rzeczywiście aktywnych.
Wszystko działa lokalnie w twojej przeglądarce — nic, co tu wpisujesz, nie jest przesyłane ani wysyłane nigdzie. Skopiuj wynik, pobierz go jako plik .txt lub wyślij go do wejścia innego narzędzia, aby dalej nad nim pracować.