Ster inactiefSter inactiefSter inactiefSter inactiefSter inactief
 

Gradients worden toegepast op background of op background-image.

radial-gradient begint standaard in het midden van het element, maar het is ook mogelijk om posities en groottes op te geven. Vergelijk maar eens het verschilt tussen de volgende voorbeelden.

NB. In alle onderstaande voorbeelden worden slechts 2 kleuren gebruikt, maar net als bij de eerder getoonde voorbeelden, kun je hier ook meer kleuren gebruiken of gebruik maken van repeating-radial-gradient. Bij dit laatste moet je dan wel de posities van de kleuren meegeven (bijv. gray 10%, yellow 25%).

Het is mogelijk om te bepalen waar het middelpunt van de cirkel (ovaal) zich moet bevinden. Dat kan op basis van 'harde' waarden in px, of met behulp van percentages. Hiervoor zijn twee getallen nodig: Het eerste geeft de horizontale positie aan, het tweede de verticale positie. Hieronder van beide een voorbeeld. De eerste keer staat daarbij aangegeven, dat het een cirkel betreft. In het tweede voorbeeld is dat weggelaten, waardoor het een ellips betreft. Het is ook mogelijk om het ene getal in px op te geven en het tweede als percentage.

<style="background: radial-gradient(circle at 30px 60px, gray, yellow);">
 

Hieronder een voorbeeld met twee percentages om de positie van het middelpunt aan te geven:

<style="background: radial-gradient(at 85% 40%, gray, yellow);">
 

Om het nog leuker te maken: Je mag ook negatieve waarden opgeven, of waarden die groter zijn dan het element dat je aan het opmaken bent. Dus bij een element, dat 200px breed is en 100px hoog, mag je het volgende opgeven:

<style="background: radial-gradient(circle at 220px -20px, gray, yellow);">
 

Het middelpunt ligt in bovenstaand voorbeeld 20px rechts en 20px boven het element. Op dezelfde manier hadden we ook negatieve percentages kunnen gebruiken of percentages die hoger zijn dan 100%.

Ook met behulp van vaste positienamen kun je aangeven, waar het middelpunt moet liggen. Voor de horizontale positie kun je dat aangeven middels left, center of right, voor de verticale positie middels top, center of bottom. Wanneer je niets opgeeft, dan gaar de browser ervan uit, dat je at center center bedoelt.

<style="background: radial-gradient(at right top, gray, yellow);">
 

Hieronder een aantal voorbeelden met de parameters closest-side, farthest-side, closest-corner en farthest-corner. Deze worden niet zo vaak gebruikt, omdat ze minder bekend zijn en het iets meer moeite kost om te begrijpen wat er precies gebeurt. Maar op basis van onderstaande voorbeelden valt het goed uit te leggen.

Met behulp van closest-side geef je aan, dat het kleurverloop compleet moet zijn zodra de dichtstbijzijnde rand van het object - gezien vanaf de positie van het middelpunt - bereikt is. Daardoor is in het eerste voorbeeld hieronder links en rechts een groot geel stuk zichtbaar.

<style="background: radial-gradient(circle closest-side, gray, yellow);">
 

farthest-side zorgt ervoor, dat pas bij het bereiken van de verste rand het kleurverloop compleet is. Hierbij zie je, dat bij het bereiken van de dichtstbijzijnde randen het kleurverloop nog maar ongeveer halverwege is.

<style="background: radial-gradient(circle farthest-side, gray, yellow);">
 

Hieronder nog enkele voorbeelden, waarbij het bovenstaande wordt gecombineerd met een een positionering van het middelpunt:

<style="background: radial-gradient(circle farthest-side at top center, gray, yellow);">
 

Of midden boven:

<style="background: radial-gradient(circle farthest-side at 15% 15%, gray, yellow);">
 

Waar we eerst keken naar de randen van de elementen, kunnen we het einde van het kleurverloop ook laten afhangen van de hoek die het dichtst bij het middelpunt ligt:

<style="background: radial-gradient(circle closest-corner at 80% 15%, gray, yellow);">
 

Of, wanneer het kleurverloop moet doorlopen tot de hoek die het verst ligt:

<style="background: radial-gradient(circle farthest-corner at 80% 15%, gray, yellow);">
 

Tot slot laten we hier nog zien hoe we van een cirkel de exacte grootte kunnen opgeven. Bij een cirkel is dat altijd maar 1 parameter (hieronder: 100px), altijd in px, want bij een percentage is niet duidelijk ten opzichte van welke afstand de grootte dan berekend moet worden.

<style="background: radial-gradient(circle 100px at 80% 15%, gray, yellow);">
 

Bij een ellips kunnen we 2 groottes opgeven. Als eerste de breedte, daarna de hoogte. Wanneer die allebei gevuld worden, dan maakt het niet uit, of dat in px of % gebeurt.

<style="background: radial-gradient(40px 90% at 80% 15%, gray, yellow);">
 

Hieronder nog een voorbeeld met repeating-radial-gradient:

<style="background: repeating-radial-gradient(circle at 30px 60px, gray 10%, yellow 25%);">
 

Als laatste nog een voorbeeld dat we radiale overgangen kunnen gebruiken om vignettering van een foto te simuleren. Het effect is hier voor de duidelijkheid wat versterkt, speel vooral met de tweede kleur om dit subtieler te maken. De grootte van het effect kun je aanpassen door het eerste percentage (70%) te veranderen.

Overigens hebben we iets meer code nodig om dit effect over een ander element heen te leggen. Onder het voorbeeld staat de volledige uitwerking.

<style="background: radial-gradient(rgba(0,0,0,0) 70%, rgba(0,0,0,0.9) 100%);">
Effect
 
Toon/verberg html5 code

Als bonus (op verzoek): Het is via complexe CSS ook mogelijk om een vierhoekige kleurovergang te creëren. Dit is vaak eenvoudiger op te lossen met een css-schaduw:

<style="background: yellow; box-shadow: 0 0 65px gray inset;">