CSS Filter Generator

Om det här verktyget

CSS-filtergeneratorn låter dig visuellt justera nio CSS-filterfunktioner — blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate och sepia — och se den kombinerade effekten i realtid.

CSS-filter tillämpar visuella effekter på HTML-element liknande fotoredigeringsprogram. De är GPU-accelererade och fungerar på bilder, bakgrunder, text.

Hur man använder

1. Dra ett skjutreglage för att tillämpa den filtereffekten.
2. Kombinera flera filter — förhandsvisningen uppdateras live.
3. Filter med standardvärden utesluts automatiskt från utmatningen.
4. Klicka Återställ allt för att återgå till standardvärden.
5. Klicka Kopiera för att kopiera CSS filter-egenskapen.

Användningsfall

Designers använder grayscale och sepia för monokroma UI-sektioner. Utvecklare använder blur för frostade glasbakgrunder. brightness används vanligt i hover-effekter. Implementationer av mörkt läge använder invert-filter.

Vanliga frågor

• Vad är skillnaden mellan filter och backdrop-filter? — filter tillämpas på elementet självt och alla dess barn. backdrop-filter tillämpas bara på området bakom elementet (användbart för frostade glasöverlägg).
• Kan jag kombinera flera filter? — Ja. Lista dem mellanrumseparerade i filter-egenskapen. Det här verktyget gör det automatiskt.
• Påverkar CSS-filter prestanda? — Enkla filter som grayscale och brightness är billiga. Blur är dyrare, speciellt på stora ytor — använd det sparsamt på mobil.