CSS Gradiëntgenerator: Volledige Gids voor Lineaire en Radiale Gradiënten

CSS-gradiënten zijn een van de krachtigste visuele tools voor webdesigners — ze creëren vloeiende overgangen tussen kleuren zonder een enkel afbeeldingsbestand, renderen op elke resolutie en animeren met CSS-transitions. Toch gebruiken veel designers alleen de basis: twee kleuren, één richting.

Deze gids behandelt het volledige scala aan CSS-gradiëntmogelijkheden: de drie gradiënttypen, geavanceerde kleurstops, hoeknotatie en creatieve technieken zoals mesh-gradiënten, gradiënttekst en gestreepte achtergronden — plus prestatieoverwegingen en best practices.

Overzicht van CSS-gradiënttypen

CSS biedt drie gradiëntfuncties. linear-gradient() creëert een overgang langs een rechte lijn. radial-gradient() creëert een overgang die vanuit een centraal punt naar buiten uitstraalt. conic-gradient() creëert een overgang die rond een centraal punt draait als een kleurenwiel. Alle drie worden gebruikt als waarden voor de background-image eigenschap.

linear-gradient syntaxis en hoeken

De basissyntaxis: linear-gradient(richting, kleurstop-1, kleurstop-2, ...). De richting kan een trefwoord zijn (to bottom, to right) of een hoek in graden (0deg = omhoog, 90deg = naar rechts, 180deg = omlaag). Het hoeksysteem gebruikt kompasstijl meting: 0deg wijst omhoog, toename met de klok mee.

/* Equivalente declaraties */
background: linear-gradient(to bottom, #3A7BD5, #00D2FF);
background: linear-gradient(180deg, #3A7BD5, #00D2FF);

/* Diagonaal */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* Meerdere stops */
background: linear-gradient(
  to right,
  #f093fb 0%,
  #f5576c 50%,
  #4facfe 100%
);

Kleurstops en overgangen

Kleurstops bepalen waar elke kleur begint en eindigt in de gradiënt. Zonder expliciete posities worden kleuren gelijkmatig verdeeld. Twee aangrenzende stops op dezelfde positie creëren een scherpe rand (geen overgang) — nuttig voor gestreepte achtergronden. Een kleurhinwijzing (een enkele waarde tussen twee stops) verschuift het middelpunt van de overgang.

/* Scherpe stops — strepen */
background: linear-gradient(
  to right,
  #e74c3c 0% 33%,
  #3498db 33% 66%,
  #2ecc71 66% 100%
);

/* Transparant vervagen */
background: linear-gradient(
  to bottom,
  rgba(0,0,0,0),
  rgba(0,0,0,0.8)
);

radial-gradient en conic-gradient

radial-gradient() straalt vanuit een centraal punt. Syntaxis: radial-gradient(vorm grootte at positie, kleuren). Vorm: circle of ellipse. conic-gradient() draait rond een centraal punt: kleuren worden over 360° verdeeld. Nuttig voor cirkeldiagrammen, kleurenwielen en rotationele patronen.

/* Radiaal spotlight */
background: radial-gradient(
  circle at center,
  #3A7BD5 0%,
  transparent 70%
);

/* Conisch — kleurenwiel */
background: conic-gradient(
  red, yellow, lime, cyan, blue, magenta, red
);

Creatieve gradiënttechnieken

Gradiënttekst: pas een gradiënt toe op background-image, gebruik dan background-clip: text en -webkit-background-clip: text met color: transparent. Gradiëntranden: gebruik background met padding-box en border-box clipping, of de border-image eigenschap. Mesh-gradiënten: leg meerdere radiale gradiënten over elkaar. Adaptieve gradiënten voor donkere modus: gebruik CSS custom properties binnen gradiëntfuncties.

Prestaties en best practices

CSS-gradiënten worden door de GPU samengesteld en presteren goed in de meeste gevallen. Vermijd het animeren van gradiënten met CSS-transitions op background-image — browsers kunnen niet interpoleren tussen gradiëntwaarden. Gebruik in plaats daarvan @property (CSS Houdini). Test altijd de toegankelijkheid van gradiënten: tekst over gradiëntachtergronden moet het WCAG-contrast op elk punt van de gradiënt behouden.

Veelgestelde Vragen