CSS Filter Generator
Een visuele tool voor het genereren en bekijken van CSS-filtereigenschappen.
Filterinstellingen
Pas elke filtereigenschap aan
Voorinstellingen
Probeer vooraf gedefinieerde filterstijlen
Voorbeeld
Bekijk de gegenereerde filtereffecten op de standaardafbeelding
Origineel
Gefilterd
Filter Preview
Gegenereerde CSS
filter: none;CSS Filterfuncties uitgelegd
Visuele effecten
- • blur(px): Vervagingseffect
- • brightness(%): Helderheidsaanpassing
- • contrast(%): Contrast aanpassing
- • opacity(%): Dekking aanpassing
Kleureffecten
- • grayscale(%): Grijswaarden effect
- • hue-rotate(deg): Tintrotatie
- • invert(%): Kleuromkering
- • saturate(%): Verzadigingsaanpassing
- • sepia(%): Sepia-effect
Gebruikstips
- • Combineer meerdere filters gescheiden door spaties
- • Toepassen op elk HTML-element, niet alleen op afbeeldingen
- • Gebruik met CSS-animaties voor dynamische effecten
- • Gebruik backdrop-filter om alleen op achtergronden toe te passen