CSS Filter Generator

O tym narzędziu

Generator filtrów CSS pozwala wizualnie dostosować dziewięć funkcji filtrów CSS — blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate i sepia — i zobaczyć połączony efekt w czasie rzeczywistym.

Filtry CSS stosują efekty wizualne do elementów HTML podobne do oprogramowania do edycji zdjęć. Są akcelerowane przez GPU i działają na obrazach, tłach, tekście.

Jak używać

1. Przeciągnij dowolny suwak, aby zastosować ten efekt filtra.
2. Łącz wiele filtrów — podgląd aktualizuje się na żywo.
3. Filtry z wartościami domyślnymi są automatycznie wykluczane z wyniku.
4. Kliknij Resetuj wszystko, aby powrócić do wartości domyślnych.
5. Kliknij Kopiuj, aby skopiować właściwość CSS filter.

Przypadki użycia

Projektanci używają grayscale i sepia dla monochromatycznych sekcji UI. Deweloperzy używają blur dla tła z efektem matowego szkła. brightness jest powszechny w efektach hover. Implementacje trybu ciemnego używają filtrów invert.

Często zadawane pytania

• Jaka jest różnica między filter a backdrop-filter? — filter stosuje się do elementu i wszystkich jego dzieci. backdrop-filter stosuje się tylko do obszaru za elementem (przydatne dla nakładek z matowego szkła).
• Czy mogę łączyć wiele filtrów? — Tak. Wylistuj je oddzielone spacją we właściwości filter. To narzędzie robi to automatycznie.
• Czy filtry CSS wpływają na wydajność? — Proste filtry jak grayscale i brightness są tanie. Blur jest droższy, zwłaszcza na dużych obszarach — używaj go oszczędnie na urządzeniach mobilnych.