Generator filtrów CSS - podgląd obrazu i kod
Dostosuj wygląd obrazu dziewięcioma filtrami CSS.
Przejdź do narzędziaDostosuj wygląd obrazu dziewięcioma filtrami CSS. Podgląd reaguje na suwaki, a gotowy kod można skopiować lub pobrać.
Spis treści
Wynik i eksport
Uzupełnij dane.
Jak działa narzędzie
Wybierz własny PNG, JPG lub WebP albo pozostaw przykład. Przesuwaj suwaki, sprawdź efekt i skopiuj CSS. Przykład HTML zawiera obraz oraz identyczną regułę filter.
Szczegóły techniczne
Efekty tworzy przeglądarkowa właściwość CSS filter. Kolejność jest stała: jasność, kontrast, nasycenie, skala szarości, sepia, odwrócenie kolorów, krycie, rozmycie i obrót odcienia. Zmiana kolejności funkcji może dać inny wynik. Jednostki procentowe oznaczają parametry funkcji; rozmycie używa pikseli, obrót odcienia stopni.
FAQ
Czy pobiorę zdjęcie po filtrze?
Ta wersja eksportuje CSS i przykład HTML. Nie zapisuje efektu w nowym PNG lub JPG.
Czy mogę użyć własnego zdjęcia?
Tak, PNG, JPG lub WebP w podanych limitach. Plik pozostaje w przeglądarce.
Dlaczego zmiana kolejności filtrów zmienia efekt?
Każda funkcja działa na wyniku poprzedniej. Skopiowany kod zachowuje kolejność z podglądu.
Ograniczenia narzędzia
Wejście: PNG, JPG lub WebP do 10 MB i 40 milionów pikseli. Oryginał nie jest modyfikowany. Eksport dotyczy CSS i strony demonstracyjnej HTML, a nie nowego pliku fotograficznego. Własny obraz jest osadzany w pobranym HTML, dlatego plik może być duży. Przetwarzanie odbywa się w karcie; narzędzie nie wysyła zdjęcia na serwer.
Źródła i aktualizacja
- MDN — filter — sprawdzono 18.09.2026.