6XC

CSS Filter-generator

Combineer blur, brightness, contrast, grayscale, hue-rotate, saturate, sepia en invert met live voorbeeld.

1.018 weergaven

6XC

De filter-eigenschap

filter past beeldbewerkingseffecten toe op elk element — foto's, video's, zelfs hele lay-outs. Functies worden aan elkaar geschakeld in één declaratie: filter: brightness(110%) contrast(120%) saturate(130%) geeft een pittige "Instagram"-look, grayscale(100%) is de klassieke zwart-witstijl, en hue-rotate verandert de kleur van beeldmateriaal zonder nieuwe bestanden.

Veelgestelde vragen

Heeft filter invloed op de prestaties?

De meeste filters zijn GPU-versneld en geen probleem bij een paar elementen. Blur is het duurst — houd de straal klein op grote oppervlakken, vooral op mobiel.

Wat is het verschil tussen filter en backdrop-filter?

filter beïnvloedt het element zelf en de inhoud ervan; backdrop-filter beïnvloedt wat zichtbaar is achter het element — dat is wat glasmorfisme gebruikt.

Vergelijkbare tools

CSS Kleurverloop Generator Ontwerp lineaire, radiale en conische CSS-kleurverlopen met live voorbeeld en kopieer de code. Genereren CSS Box Shadow Generator Ontwerp een box-shadow visueel — verschuiving, vervaging, spreiding, kleur, dekking en inset — met live preview. Genereren CSS Border-Radius Generator Rond elke hoek afzonderlijk of allemaal tegelijk af, in px of %, met live voorbeeld en kopieerbare CSS. Genereren CSS Tekstschaduw Generator Ontwerp een text-shadow met verschuiving, vervaging, kleur en dekking — live voorbeeld op voorbeeldtekst. Genereren