Softonic

Generator filtrów CSS

Krok 1 / 2
Dalej

Właściwość CSS filter stosuje efekty obróbki obrazu, takie jak rozmycie, jasność, kontrast czy nasycenie, do każdego elementu, nie tylko do obrazów. Błędy zdarzają się przy łączeniu kilku filtrów i dobieraniu jednostek. Ten generator tworzy deklarację filter dla pięciu najczęstszych funkcji: rozmycia, jasności, kontrastu, skali szarości i nasycenia. Wpisz wartości i skopiuj wygenerowany CSS.

Jak zbudować łańcuch filtrów

  1. 1

    Wpisz wartości

    Rozmycie podaje się w pikselach; jasność, kontrast, skalę szarości i nasycenie w procentach.

  2. 2

    Zrozum skalę

    Jasność i kontrast na poziomie 100% oznaczają brak zmian; przy 0% element staje się czarny lub szary. Skala szarości idzie od 0% (pełny kolor) do 100% (całkowicie odbarwiony); nasycenie 100% zachowuje kolory bez zmian.

  3. 3

    Wygeneruj CSS

    Kliknij przycisk, a narzędzie wypisze połączoną regułę `filter` ze wszystkimi pięcioma funkcjami.

  4. 4

    Skopiuj regułę

    Skopiuj wynik i wklej go do arkusza stylów.

  5. 5

    Sprawdź kolejność

    Funkcje są stosowane od lewej do prawej. Jeśli efekt różni się od oczekiwanego, dostosuj wartości.

Funkcje filtra

Funkcja Jednostka Efekt
blur() px Rozmycie gaussowskie. 0 = bez rozmycia
brightness() % lub liczba dziesiętna 100% = bez zmian, 0% = czerń, 200% = dwukrotnie jaśniej
contrast() % lub liczba dziesiętna 100% = bez zmian, 0% = szarość, 200% = dwukrotnie mocniej
saturate() % lub liczba dziesiętna 100% = bez zmian, 0% = skala szarości
grayscale() % lub liczba dziesiętna 0% = bez zmian, 100% = pełne odbarwienie
sepia() % lub liczba dziesiętna 0% = bez zmian, 100% = pełna sepia
hue-rotate() deg 0deg = bez zmian. Obraca koło barw
invert() % lub liczba dziesiętna 0% = bez zmian, 100% = pełna inwersja
opacity() % lub liczba dziesiętna To samo co właściwość opacity
drop-shadow() x y rozmycie kolor Jak box-shadow, ale podąża za kryciem/clip-path

Kolejność w łańcuchu ma znaczenie

filter: brightness(0.5) saturate(2) najpierw stosuje jasność, potem nasycenie – oba filtry nakładają się na siebie.

filter: saturate(2) brightness(0.5) najpierw stosuje nasycenie. Ponieważ obraz jest jaśniejszy, zanim zostanie przyciemniony, nasycenie barw jest bardziej wyraziste.

Różnica wizualna jest subtelna, ale realna. Gdy łańcuch filtrów nie wygląda tak, jak się spodziewasz, wypróbuj obie kolejności.

Typowe przepisy

/* Wygląd wyblakłego zdjęcia */
filter: contrast(0.9) saturate(0.85) brightness(1.05);

/* Vintage / wyblakłe */
filter: sepia(0.3) contrast(1.1) brightness(0.95);

/* Przybliżenie duotonu */
filter: grayscale(1) sepia(1) hue-rotate(180deg) saturate(1.5);

/* Przyciemnienie obrazu głównego */
filter: brightness(0.6);

/* Stan wyłączony */
filter: grayscale(1) opacity(0.6);

/* Nakładka z matowego szkła */
filter: blur(12px) saturate(1.3);

backdrop-filter dla efektu matowego szkła

filter dotyczy samego elementu; backdrop-filter dotyczy tego, co znajduje się za półprzezroczystym elementem – czyli efektu matowego szkła, który spopularyzował iOS.

.modal-backdrop {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px) saturate(1.2);
}

Obsługa: wszystkie nowoczesne przeglądarki; Firefox wreszcie obsługuje go bez flagi od wersji 103.

Uwagi o wydajności

  • blur() jest najbardziej kosztownym filtrem, ponieważ wymaga splotu każdego piksela z jądrem. Rozmycie 30px na dużym obrazie 4K realnie obniża liczbę klatek.
  • grayscale, sepia, brightness i podobne to przekształcenia barw na poziomie pikseli – tanie.
  • W nowoczesnych przeglądarkach filtry są przyspieszane przez GPU, ale animowanie blur() nadal przycina na słabszych urządzeniach.
  • Przed animacją warto ustawić will-change: filter.

filter: drop-shadow() a box-shadow

  • box-shadow podąża za obwiednią elementu (uwzględnia border-radius).
  • filter: drop-shadow() podąża za nieprzezroczystymi pikselami elementu, więc odwzorowuje kształty clip-path, przezroczystość PNG oraz kontury SVG.

Do cieni na przyciętych lub przezroczystych obrazach używaj drop-shadow; do zwykłych kart i ramek szybszy jest box-shadow.

Najczęściej zadawane pytania

Tak – filtr jest stosowany do elementu i wszystkich jego potomków jako do jednej grupy. Jeśli przefiltrujesz element nadrzędny, obejmie to także elementy podrzędne. Aby przefiltrować wyłącznie tło elementu nadrzędnego, umieść treść w osobnym kontekście stosu lub użyj backdrop-filter.

Ponieważ rozmycie dotyczy całego elementu, łącznie z wyrenderowanym tekstem. Samym zwykłym filter nie da się rozmyć tła i jednocześnie zachować ostrości tekstu. Użyj backdrop-filter na półprzezroczystej nakładce, a tekst trzymaj poza filtrowanym elementem.

Tak, wszystkie funkcje filtrów można animować. Zwracaj uwagę na wydajność rozmycia na urządzeniach mobilnych – animowanie promienia rozmycia jest zauważalnie kosztowne. grayscale, sepia i brightness animują się tanio.

Tak, CSS filter odnosi się do elementów SVG tak samo jak do każdego innego elementu DOM. SVG posiada również własny, bardziej rozbudowany system elementów <filter>, który jest potężniejszy, ale znacznie bardziej szczegółowy.

Powiązane narzędzia

Tabela ASCII

Pełna tabela ASCII od 0 do 127 z zapisem dziesiętnym, szesnastkowym, ósemkowym i binarnym oraz notacją numerycznych odwołań HTML, w tym kodami sterującymi NUL, LF i DEL.

Referencja znaków HTML

Przeszukiwalna lista encji HTML wraz z ich kodami nazwanymi i liczbowymi oraz kopiowaniem jednym kliknięciem specjalnych znaków i symboli.

Skróty klawiaturowe

Wyszukuj udokumentowane skróty domyślne VS Code, Chrome i Bash z GNU Readline w macOS, Windows i Linux.

Generator losowych liter

Generuj losowe litery A-Z. Wybierz liczbę, wielkie litery, małe litery lub zapis mieszany i użyj wyniku w grach, zadaniach lub lekcjach.

Konwerter ASCII na binarny

Konwertuj dowolny ciąg ASCII na reprezentację binarną. Każdy znak staje się ośmioma bitami, rozdzielonymi spacjami, gotowymi do wklejenia w ślad protokołu albo zadanie domowe.

Próbnik kolorów HEX

Wybierz lub wpisz kolor HEX i sprawdź RGB, HSL, przybliżone CMYK, luminancję względną oraz kontrast z bielą i czernią.