CSS Gradient Generator

Wat is een CSS-verloop?

Een CSS gradient generator is een visuele tool waarmee je soepele kleurovergangen kunt bouwen zonder de verloopsyntax met de hand te schrijven. In CSS is een verloop een vloeiende overgang tussen twee of meer kleuren, rechtstreeks door de browser weergegeven zonder afbeeldingsbestand. De CSS Image Module Level 4-specificatie definieert verloopfuncties als een type afbeeldingswaarde, wat betekent dat ze overal gebruikt kunnen worden waar background-image, list-style-image of border-image wordt geaccepteerd. Omdat de browser verlopen rasteriseert tijdens het renderen, schalen ze naar elke resolutie en produceren ze nooit wazige artefacten op high-DPI-schermen. Een CSS gradient generator bespaart tijd en vermindert giswerk — je past kleuren en posities visueel aan en kopieert vervolgens de voltooide CSS-regel.

CSS ondersteunt drie hoofdvormen van verlopen: lineair (langs een rechte lijn), radiaal (naar buiten vanuit een middelpunt) en conisch (een sweep rondom een middelpunt). Elke vorm accepteert een lijst met kleurstops, waarbij je de kleur en optioneel een positie (percentage of lengte) opgeeft. De browser interpoleert kleuren tussen stops standaard in de sRGB-kleurruimte, hoewel CSS Color Level 4 het mogelijk maakt andere kleurruimten op te geven, zoals oklch en lab, voor visueel soepelere overgangen.

Verlopen vervangen afbeeldingsgebaseerde achtergronden voor de meeste decoratieve doeleinden op het web. Eén CSS-regel produceert wat vroeger een Photoshop-export en een HTTP-verzoek vereiste. Ze zijn resolutieonafhankelijk, vereisen geen netwerkbandbreedte buiten de CSS zelf, en kunnen worden geanimeerd of overgegaan met standaard CSS-eigenschappen. De verloopsyntax is stabiel in alle grote browsers sinds 2013, en de versie zonder vendor-prefix werkt in Chrome, Firefox, Safari en Edge zonder fallbacks.

Waarom deze CSS Gradient Generator gebruiken?

Verloopsyntax met de hand schrijven betekent raden naar stopposities, hoekwaarden controleren en steeds vernieuwen om het resultaat te zien. Een visuele bouwer laat je het verloop zien terwijl je het opbouwt, stops aanpassen door te slepen en de definitieve CSS kopiëren zodra het er goed uitziet.

Toepassingen van de CSS Gradient Generator

Naslaggids voor CSS-verlooptypen

CSS definieert vijf verloopfuncties. De drie primaire typen (linear, radial, conic) hebben elk een herhalingsvariant die het patroon tegelt. repeating-linear-gradient() en repeating-radial-gradient() zijn handig voor gestreepte achtergronden en concentrische ringen. Alle verloopfuncties accepteren kleurstops in elk CSS-kleurformaat: HEX, RGB, HSL, benoemde kleuren of oklch. Browserondersteuning voor alle vijf functies is praktisch universeel in Chrome, Firefox, Safari en Edge — er zijn geen vendor-prefixes vereist.

Lineair vs radiaal vs conisch verloop

Elk verlooptyp koppelt kleuren op een andere manier aan geometrie. De juiste keuze hangt af van het gewenste visuele effect, niet van een kwaliteitsverschil tussen de typen. Voor de meeste paginaachtergronden en sectieverdelers is een lineair verloop de juiste standaardkeuze — het is het eenvoudigst te doordenken en het meest voorspelbaar bij elementen van uiteenlopende afmetingen. Radiale en conische verlopen zijn beter gereserveerd voor specifieke visuele effecten waarbij de cirkelvormige of rotationele geometrie betekenisvol is in plaats van decoratief.

Codevoorbeelden

Voorbeelden van het genereren en toepassen van CSS-verlopen via code in JavaScript, Python, CSS en Go. Elk voorbeeld produceert geldige CSS-verloopstrings die je direct in stylesheets of inline-stijlen kunt gebruiken.

// Generate a CSS linear-gradient string from an array of stops
function buildGradient(angle, stops) {
  const parts = stops.map(s => `${s.color} ${s.position}%`)
  return `linear-gradient(${angle}deg, ${parts.join(', ')})`
}

const stops = [
  { color: '#6366f1', position: 0 },
  { color: '#ec4899', position: 50 },
  { color: '#f59e0b', position: 100 },
]
buildGradient(90, stops)
// -> "linear-gradient(90deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)"

// Apply to an element
document.querySelector('.hero').style.background = buildGradient(135, stops)

# Generate a CSS gradient string for use in templates or SVGs
def build_gradient(angle: int, stops: list[tuple[str, int]]) -> str:
    parts = [f"{color} {pos}%" for color, pos in stops]
    return f"linear-gradient({angle}deg, {', '.join(parts)})"

stops = [("#6366f1", 0), ("#ec4899", 50), ("#f59e0b", 100)]
print(build_gradient(135, stops))
# -> "linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)"

# Interpolate N colors between two endpoints
def interpolate_hex(c1: str, c2: str, steps: int) -> list[str]:
    r1, g1, b1 = int(c1[1:3], 16), int(c1[3:5], 16), int(c1[5:7], 16)
    r2, g2, b2 = int(c2[1:3], 16), int(c2[3:5], 16), int(c2[5:7], 16)
    return [
        f"#{int(r1+(r2-r1)*i/(steps-1)):02x}"
        f"{int(g1+(g2-g1)*i/(steps-1)):02x}"
        f"{int(b1+(b2-b1)*i/(steps-1)):02x}"
        for i in range(steps)
    ]

interpolate_hex("#6366f1", "#f59e0b", 4)
# -> ['#6366f1', '#9a7399', '#d18042', '#f59e0b']

/* Linear gradient — left to right */
.hero {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%);
}

/* Radial gradient — circular spotlight */
.badge {
  background: radial-gradient(circle at 30% 30%, #6366f1, #312e81);
}

/* Conic gradient — color wheel */
.wheel {
  background: conic-gradient(from 0deg, #ef4444, #f59e0b, #22c55e, #3b82f6, #8b5cf6, #ef4444);
  border-radius: 50%;
}

/* Multi-stop with transparency */
.overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.6) 60%,
    rgba(0, 0, 0, 0.9) 100%
  );
}

/* Repeating stripes */
.stripes {
  background: repeating-linear-gradient(
    45deg,
    #6366f1 0 10px,
    transparent 10px 20px
  );
}

package main

import "fmt"

// Stop represents one color stop in a gradient.
type Stop struct {
	Color    string
	Position int // percent 0-100
}

func buildGradient(angle int, stops []Stop) string {
	result := fmt.Sprintf("linear-gradient(%ddeg", angle)
	for _, s := range stops {
		result += fmt.Sprintf(", %s %d%%", s.Color, s.Position)
	}
	return result + ")"
}

func main() {
	stops := []Stop{
		{"#6366f1", 0},
		{"#ec4899", 50},
		{"#f59e0b", 100},
	}
	fmt.Println(buildGradient(135, stops))
	// -> "linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)"
}

Veelgestelde vragen