CSS radial gradient: vormen, formaten en posities

Een CSS radial gradient laat kleur vanuit een punt naar buiten overlopen, zoals licht dat uit een lamp straalt. Je schrijft hem met radial-gradient() en gebruikt hem overal waar CSS een afbeelding neemt, meestal background-image. Zonder opties tekent hij een ellips midden in het vak die de verste hoek raakt: radial-gradient(#fef3c7, #b45309) geeft een bleek midden dat uitgloeit naar diep amber.

Al het andere in de functie verandert een van drie dingen: de vorm, het formaat en de positie. Beheers je die, dan tekent dezelfde functie gloeden, spotlights, vignetten, zonnestralen en de kleurpoelen achter een mesh gradient in CSS. Voor de ontwerpkant van radiale overlopen staat er een aanvullende gids over radiale kleurverlopen.

De syntaxis van radial-gradient()

/* shape  size          position        stops */
radial-gradient(circle closest-side at 30% 40%, #fde047, #ea580c 60%, #1c1917)

/* everything before the first comma is optional */
radial-gradient(#fde047, #ea580c)

Eén regel verrast mensen: het formaat van een cirkel moet een lengte zijn, zoals 200px, nooit een percentage, omdat een percentage van een rechthoek geen enkele straal heeft. Ellipsen accepteren wel percentages, zoals in ellipse 60% 40%. De MDN-referentie voor radial-gradient() geeft de volledige grammatica.

Cirkel of ellips

Een ellips rekt mee met het vak: op een brede banner is de gloed breed en op een hoge story is hij hoog. Een cirkel blijft rond, wat het vak ook doet. Gebruik ellipsen voor achtergronden die hun container gelijkmatig moeten vullen, en cirkels voor alles wat als lichtbron, planeet of gloed van een knop moet lezen.

Formaatwoorden: van closest-side tot farthest-corner

Het formaat bepaalt waar de laatste kleurstop landt, en dus waar de eindvorm van de gradient zit. De vier woorden meten vanaf het middelpunt tot de dichtstbijzijnde of verste zijde of hoek van het vak. Ze zien er alleen anders uit als het middelpunt niet in het midden ligt, dus alle voorbeelden hieronder beginnen op 30% 40%.

In de praktijk past closest-side bij afgebakende vormen zoals stippen en badges, omdat de kleur nooit over de dichtstbijzijnde rand loopt. farthest-corner past bij achtergronden, omdat de overloop het hele vak bedekt. Heb je exacte controle nodig, geef dan een lengte: circle 180px at 50% 0 is een gloed van 180 pixels die aan de bovenrand hangt.

Positioneren met at

Het woord at plaatst het middelpunt met dezelfde waarden als background-position: woorden zoals at top right, percentages zoals at 20% 80% of lengtes zoals at 40px 60px. Het middelpunt kan zelfs buiten het vak liggen, zoals in at 50% 120%, wat een horizongloed geeft die onder de onderrand oprijst.

Gelaagde radiale gloeden

Het nuttigste radiale patroon is een stapel gradients in één background-image, elk vervagend naar transparent, boven een egale donkere kleur. Elke laag is een poel licht op een eigen plek. Omdat de eerste laag bovenop wordt geschilderd, zet je de helderste, kleinste gloed eerst.

.glow {
  background-color: #0b0a1a;
  background-image:
    radial-gradient(circle at 20% 25%, rgb(124 58 237 / 0.55), transparent 45%),
    radial-gradient(circle at 80% 30%, rgb(236 72 153 / 0.45), transparent 40%),
    radial-gradient(ellipse at 50% 110%, rgb(56 189 248 / 0.4), transparent 60%);
}

Twee andere patronen dekken de meeste overige klussen. Een vignet maakt de randen donkerder: radial-gradient(ellipse, transparent 55%, rgb(0 0 0 / 0.55)) over een foto gelegd. Een spotlight volgt de aanwijzer als je de positie uit custom properties haalt, zoals radial-gradient(circle 240px at var(--x) var(--y), rgb(255 255 255 / 0.15), transparent), met een paar regels JavaScript die --x en --y zetten bij pointermove.

Herhalende radiale gradients

repeating-radial-gradient() herhaalt zijn stops naar buiten tot het vak vol is, zodat een paar harde stops ringen wordt. Gebruik lengtes voor de stopposities zodat de ringbreedte gelijk blijft. Het is de basis van rimpel-, schietschijf- en halftoonachtige texturen, en de gids over CSS-patronen heeft meer.