Generator Filtrów CSS

Dostosuj efekty takie jak rozmycie i jasność za pomocą suwaka, generując kod CSS filter z podglądem

AktualizacjeDodano generator filtrów CSS, generuj dostosowując rozmycie i jasnośćWyświetl informacje o aktualizacjach

Funkcje

9 efektów za pomocą suwaków

Podgląd i kod CSS zmieniają się jednocześnie po każdym ruchu

Testuj własne obrazy

Wyświetl obraz z komputera w przeglądarce i sprawdź efekt

Porównaj przed i po

Popatrz na różnicę między obrazem z efektem i bez niego na bieżąco

Szablony do dostosowania

Wybierz szablon (sepia, vintage itp.) i dostosuj szczegóły

Jak używać

Wybierz obraz

Kliknij „Wybierz obraz" i wskaż plik. Jeśli go nie wybierzesz, będziesz mógł testować na wbudowanym obrazie przykładowym

Dostosuj efekt

Wybierz szablon o podobnym nastroju lub zmień intensywność za pomocą suwaków

Porównaj rezultaty

Kliknij i przytrzymaj „Porównaj z oryginałem", aby wyświetlić obraz bez efektu

Skopiuj kod

Kliknij „Kopiuj" i wklej jedną linię filter do swojego CSS

Zastosowania

Czytelność tekstu na tle zdjęcia

Lekko rozmyj zdjęcie tła, aby nagłówek był bardziej czytelny

Ujednolicenie tonacji zdjęć

Doprowadź zdjęcia na stronie zespołu lub galerii do wspólnego stylu (czarno-białe, sepia)

Ustalenie wartości dla własnych zdjęć

Przetestuj efekty (wyblakłość, vintage) na rzeczywistych zdjęciach, które będziesz używać

Dostosowanie obrazów do ciemnego motywu

Zmniejsz jasność i kontrast, aby zdjęcia nie były zbyt ostre na ciemnym tle

Podstawy

Funkcje i jednostki filter

Właściwość CSS filter dodaje efekty wizualne do elementów (obrazów, tekstu itp.). Funkcje takie jak blur czy sepia są oddzielane spacjami.

px (piksele)：Funkcja blur określa promień rozmycia w px. Na przykład blur(4px) rozmywa obraz w promieniu 4 pikseli.
% (procent)：Funkcje takie jak brightness czy sepia określają intensywność efektu w procentach. Dla brightness: 100% to oryginalna jasność, 120% oznacza 20% jasniej.
deg (stopnie)：Funkcja hue-rotate określa kąt rotacji barwy. Na przykład hue-rotate(180deg) zmienia kolor na odwrotny w kole barw.

Dlaczego kolejność zmienia wynik

Funkcje w filter są stosowane od lewej do prawej. Każdy efekt jest nakładany na wynik poprzedniego, więc zmiana kolejności może zmienić wygląd. Na przykład: najpierw czarno-białe, potem sepia pozostawia brąz; najpierw sepia, potem czarno-białe usuwa brąz. To narzędzie używa stałej kolejności, ale możesz edytować wygenerowany kod CSS, aby zmienić kolejność.

Różnica między filter a backdrop-filter

Filter i backdrop-filter używają tych samych funkcji, ale działają na różnych elementach.

filter：Filter stosuje efekt do samego elementu (obrazu, tekstu itp.).
backdrop-filter：Backdrop-filter stosuje efekt do obszaru za elementem. Używa się go do efektów typu matowe szkło.