CSS Verloop Generator
Gratis online CSS-gradient-generator, realtime voorbeeld
Typen CSS-verlopen
Lineaire verlopen laten kleuren overgaan langs een rechte lijn die wordt gedefinieerd door een hoek of richting. Radiale verlopen gaan over vanuit een middelpunt naar buiten in een cirkelvormige of elliptische vorm. Beide ondersteunen meerdere kleurstops voor complexe overgangen tussen drie of meer kleuren.
Een CSS-verloop maken
Selecteer het verlooptype (lineair of radiaal), kies begin- en eindkleuren en pas de hoek aan voor lineaire verlopen. De tool genereert direct de CSS-code. Kopieer de CSS en plak het in uw stylesheet als een background- of background-image-eigenschap.
▶Kan ik meer dan twee kleuren gebruiken in een verloop?
Ja, CSS-verlopen ondersteunen onbeperkte kleurstops. Voeg extra kleuren toe door de gegenereerde CSS-code te wijzigen met aanvullende kleurwaarden, gescheiden door komma's.
▶Wat is de browserondersteuning voor CSS-verlopen?
CSS-verlopen worden ondersteund in alle moderne browsers. Voor oudere browsers heeft u mogelijk leveranciersvoorvoegsels (-webkit-gradient) of een vaste uitvalskleur nodig.
▶Kan ik transparantie gebruiken in verlopen?
Ja. Gebruik rgba()- of hsla()-kleurwaarden om transparantie toe te voegen. linear-gradient(135deg, rgba(255,0,0,0.5), transparent) maakt bijvoorbeeld een halftransparant rood verloop.