CSS radial-gradient() functie

Vorige pagina CSS pow() functie
Volgende pagina CSS ray() functie
Terug naar de vorige pagina CSS Functie Referentie Handboek

Definitie en gebruik

CSS radial-gradient() De functie stelt een radiaal verloop in als achtergrondafbeelding.

Een radiaal verloop wordt gedefinieerd door zijn centrum.

Om een radiaal verloop te maken, moet ten minste twee kleurindelingen worden gedefinieerd.

Voorbeeld van radiaal verloop:

Voorbeeld

Voorbeeld 1

Verspreiding van kleurindeling gelijkmatig verdeeld radiale verloop:

#grad {
  background-image: radial-gradient(red, green, blue);
}

Probeer het zelf

Voorbeeld 2

Verspreiding van kleurindeling verschillende radiale verloop:

#grad {
  background-image: radial-gradient(red 5%, green 15%, blue 60%);
}

Probeer het zelf

Voorbeeld 3

Cirkelvormige radiale verloop:

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

Probeer het zelf

Voorbeeld 4

Gebruik verschillende groottekeywords voor de radiale verloop:

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, blue, green, yellow, black);
}
#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);
}

Probeer het zelf

CSS syntaxis

radial-gradient(shape size at position, start-color, ... , last-color);

Waarde	Beschrijving
shape	Definieert de vorm van de verloop. Mogelijke waarden: ellipse (standaard) circle
size	Definieert de grootte van de verloop. Mogelijke waarden: farthest-corner (standaard) closest-side closest-corner farthest-side
position	Definieert de positie van de verloop. Standaardwaarde is "center".
start-color, ... , last-color	Kleurenduiding is de kleuren die u wilt laten weergeven met een gladde overgang. Deze waarde bestaat uit een kleurwaarde, gevolgd door een of twee optionele kleurenduidingposities (percentage tussen 0% en 100% of de lengte langs de verloopas).