Generator Filtrów CSS

Dokumentacja

Czym jest właściwość CSS filter?

Właściwość CSS filter stosuje efekty graficzne takie jak rozmycie, zmiana koloru i regulacja kontrastu do elementu. Filtry są stosowane przed złożeniem elementu, wpływając na cały element łącznie z obramowaniami i cieniami. Wiele funkcji filtrów można łączyć w jednej deklaracji.

Wszystkie funkcje filtrów CSS

blur(px): Stosuje rozmycie gaussowskie. Wyższe wartości = więcej rozmycia.
brightness(%): Reguluje jasność. 100% = oryginał, 0% = całkowicie czarny.
contrast(%): Reguluje kontrast. 100% = oryginał, 0% = całkowicie szary.
grayscale(%): Konwertuje do skali szarości. 0% = oryginał, 100% = w pełni szary.
hue-rotate(deg): Obraca kolory na kole barw. 0deg = oryginał, 180deg = przeciwne barwy.
invert(%): Odwraca kolory. 0% = oryginał, 100% = w pełni odwrócony.
opacity(%): Reguluje przezroczystość. 100% = w pełni nieprzezroczysty, 0% = w pełni przezroczysty.
saturate(%): Reguluje nasycenie kolorów. 100% = oryginał, powyżej 100% = super-nasycony.
sepia(%): Stosuje ton sepii. 0% = oryginał, 100% = w pełni sepia.

Kwestie wydajności

Filtry CSS są akcelerowane przez GPU w nowoczesnych przeglądarkach. Jednak stosowanie filtrów do dużych obszarów lub animowanie wartości filtrów może powodować przerysowania. Dla najlepszej wydajności: używaj will-change: filter na animowanych elementach i preferuj backdrop-filter, gdy chcesz rozmyć tylko tło za elementem.

Typowe przypadki użycia

Efekty hover na obrazach — skala szarości w spoczynku, kolor przy najechaniu.
Stan wyłączony — filter: grayscale(100%) opacity(50%) dla wyłączonych elementów UI.
Tryb ciemny — filter: invert(1) hue-rotate(180deg) jako szybka sztuczka.
Rozmycie tła — backdrop-filter: blur(10px) dla efektu matowego szkła.
Zdjęcie vintage — połączenie sepii, kontrastu i jasności dla wyglądu analogowego.

Prywatność

Całe generowanie filtrów odbywa się w 100% w Twojej przeglądarce. Żadne dane nie są wysyłane na serwer. Przesłane obrazy pozostają na Twoim urządzeniu.