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

Generator konfiguracji webpack

Utwórz plik webpack.config.js dla webpacka 5 do czystego JavaScriptu, Reacta lub Vue: TypeScript, Babel, CSS lub Sass, obrazy, HtmlWebpackPlugin, serwer deweloperski i polecenie npm install.

Generator kolorów analogicznych

Twórz pięciokolorowe palety analogiczne z dowolnego koloru bazowego: klasyczną trójkę, dwie zewnętrzne barwy oraz wartości hex, RGB i HSL.

Generator fikcyjnych numerów telefonu

Generuj do 50 fikcyjnych numerów z oficjalnie zastrzeżonych zakresów w pięciu krajach.

Walidator XSD

Waliduj dokument XML wobec schematu XSD i zgłaszaj niezgodności elementów i typów z dokładnymi numerami wierszy.

Kod na obraz

Wklej kod, ustaw motyw, kolory, rozmiar czcionki, odstępy, nagłówek i numery wierszy, sprawdź podgląd canvas i pobierz PNG. Renderowanie zwykłego tekstu, bez podświetlania składni.

Dekoder Protocol Buffers

Dekoduj lokalnie bajty Protobuf z zapisu hex, Base64, Base64URL, tekstu lub pliku, analizuj pola i eksportuj prywatny raport.

Narzędzie jest dostępne w innych językach