Waarom CSS gradients nog steeds onderbenut zijn
Geïntroduceerd in CSS3 (2009), lossen de drie typen fundamenteel verschillende visuele problemen op:
linear-gradient()— overgangen langs een rechte lijn.radial-gradient()— overgangen die uitstralen vanuit een middelpunt.conic-gradient()— overgangen die rond een middelpunt draaien.
Alle drie delen dezelfde color stop-syntaxis maar verschillen in geometrie.
linear-gradient: de basis
Een lineair gradient maakt kleurovergangen langs een rechte lijn.
Syntaxis
Het richtingsargument bepaalt de hoek:
| Waarde | Hoek | Richting |
|---|---|---|
| to bottom | 180deg | Boven naar Beneden (standaard) |
| to right | 90deg | Links naar Rechts |
| to bottom right | 135deg | Linksboven naar Rechtsonder |
| 45deg | 45deg | Linksonder naar Rechtsboven |
| 0.25turn | 90deg | Links naar Rechts (turn) |
Color stops: posities, lengtes en harde overgangen
Harde overgangen worden gemaakt door twee stops op dezelfde positie te plaatsen.
red 20% 40% is gelijk aan red 20%, red 40%.
De color hint: middelpuntcontrole
De color hint verschuift het interpolatiemiddelpunt tussen twee stops.
repeating-linear-gradient
repeating-linear-gradient() herhaalt het patroon oneindig.
radial-gradient: circulair en elliptisch
Een radiaal gradient straalt uit vanuit een middelpunt en creëert standaard een ellips.
Syntaxis
Het eerste argument bepaalt vorm en grootte. at <positie> verplaatst het centrum.
Vorm en dimensioneringssleutelwoorden
Het groottesleutelwoord bepaalt waar het gradient eindigt:
farthest-corner(standaard) — tot de verste hoek.closest-corner— tot de dichtstbijzijnde hoek.farthest-side— tot de verste zijde.closest-side— tot de dichtstbijzijnde zijde.
Het centrum positioneren
at accepteert elke geldige CSS-positiewaarde.
conic-gradient: de nieuwkomer
conic-gradient() was het laatst ondersteunde type. De overgangen draaien rond een middelpunt.
Syntaxis
<code>from <hoek></code> roteert het beginpunt. <code>at <positie></code> verschuift het centrum.
Waarvoor conic gradients echt dienen
- Taartdiagrammen — zonder JavaScript.
- Kleurwielen — van hsl(0deg) tot hsl(360deg).
- Hoekpatronen — met repeating-conic-gradient.
- Voortgangsringen — met border-radius: 50%.
repeating-conic-gradient
repeating-conic-gradient() herhaalt het hoekpatroon.
Geavanceerde patronen
Technieken buiten standaardgebruik.
Gestreepte achtergronden
Hard-stop gradients met background-size creëren schaalbare strepen.
Gradienttekst
background: gradient, -webkit-background-clip: text, color: transparent.
Mesh gradients
Meerdere overlappende radialen. Gebruik de PixCode Color Palette Generator.
Dambord met conic-gradient
repeating-conic-gradient(#000 0% 25%, transparent 0% 50%) met background-size.
Vergelijking naast elkaar
| Kenmerk | linear-gradient | radial-gradient | conic-gradient |
|---|---|---|---|
| Richtingsmodel | Rechte lijn | Radiaal vanuit centrum | Hoeksgewijze draai |
| Repeating-variant | repeating-linear-gradient | repeating-radial-gradient | repeating-conic-gradient |
| Color hint | Ja | Ja | Ja |
| Inset | Nee | Nee | Nee |
| Gebruiksscenario's | Achtergronden, knoppen | Spotlights, gloed | Taarten, wielen |
Prestatieoverwegingen
Sommige patronen veroorzaken repaints:
Statische gradients. Als background-image. Repeating.
Color stops animeren. Grote oppervlakken met veel radialen. Kleine gradienttekst.
Animeer nooit background rechtstreeks. Gebruik pseudo-element met opacity of transform.
Toegankelijkheid en contrast
Tekst op gradients moet op elk punt voldoen aan WCAG AA.
Test op het lichtste punt. Overlay: background: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%).