CSS filter: Blur, Helderheid, Contrast en meer
Beheers de CSS filter-eigenschap — blur, brightness, contrast, grayscale, hue-rotate en drop-shadow.
De CSS filter-eigenschap past grafische effecten toe op elementen. In tegenstelling tot beeldbewerking in Photoshop zijn CSS-filters realtime en niet-destructief.
Filters worden toegepast als een lijst van functies. De volgorde is belangrijk: elk filter wordt toegepast op het resultaat van het vorige.
Wat is CSS filter
De CSS filter-eigenschap accepteert een door spaties gescheiden lijst van filterfuncties. Filters zijn van toepassing op het element en al zijn inhoud inclusief kinderen.
Gratis Tool CSS Filter Generator Bouw CSS-filtereffecten met live voorbeeld — vervaging, helderheid, contrast en meerblur() en brightness()
blur(radius) past een Gaussiaanse vervaging toe. brightness(hoeveelheid) past de helderheid aan: brightness(1) ongewijzigd, brightness(0) is zwart.
contrast(), grayscale(), sepia()
contrast(hoeveelheid) past het contrast aan. grayscale(hoeveelheid) verwijdert kleur: grayscale(1) is volledig grijswaarden. sepia(hoeveelheid) past een warme bruine toon toe.
Gratis Tool Kleurenblindheid Simulator Bekijk hoe je ontwerpen eruitzien voor gebruikers met kleurzienstoornissenhue-rotate() en saturate()
hue-rotate(hoek) draait de tint van alle kleuren. saturate(hoeveelheid) past de kleurintensiteit aan: saturate(0) is grijswaarden, saturate(2) is sterk verzadigd.
drop-shadow() vs box-shadow
drop-shadow() creëert een schaduw die de vorm van het element volgt, inclusief transparante gebieden in afbeeldingen. box-shadow volgt alleen het rechthoekige begrenzingskader van het element.
Meerdere filters combineren
Meerdere filters worden van links naar rechts toegepast. filter: brightness(1.2) contrast(1.1) saturate(1.3) creëert een levendig beeld.
Gratis Tool Glassmorphism Generator Maak matglas UI-effecten met backdrop-filter en vervaging