CSS Filter Generator
Apply CSS filters with live preview.
Voorbeeld
.element {
filter: none;
}Over deze tool
De CSS Filter Generator laat je negen CSS-filterfuncties visueel aanpassen — blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate en sepia — en het gecombineerde effect in realtime zien.
CSS-filters passen visuele effecten toe op HTML-elementen, vergelijkbaar met fotobewerking software. Ze zijn GPU-versneld en werken op afbeeldingen, achtergronden, tekst.
Hoe te gebruiken
- Sleep een schuifregelaar om dat filtereffect toe te passen.
- Combineer meerdere filters — de voorvertoning werkt live bij.
- Filters met standaardwaarden worden automatisch uitgesloten van de uitvoer.
- Klik Alles resetten om naar de standaardwaarden terug te keren.
- Klik Kopiëren om de CSS-filtereigenschap te kopiëren.
Gebruiksscenario's
Ontwerpers gebruiken grayscale en sepia voor monochrome UI-secties. Ontwikkelaars gebruiken blur voor matglazen achtergronden. brightness wordt veel gebruikt in hover-effecten. Implementaties van de donkere modus gebruiken invert-filters.
Veelgestelde vragen
- Wat is het verschil tussen filter en backdrop-filter? — filter wordt toegepast op het element zelf en al zijn kinderen. backdrop-filter wordt alleen toegepast op het gebied achter het element (handig voor matglazen overlays).
- Kan ik meerdere filters combineren? — Ja. Vermeld ze gescheiden door spaties in de filtereigenschap. Dit hulpmiddel doet dat automatisch.
- Beïnvloeden CSS-filters de prestaties? — Eenvoudige filters zoals grayscale en brightness zijn goedkoop. Blur is duurder, vooral op grote gebieden — gebruik het spaarzaam op mobiel.