CSS Gradient Generator

Wat is een CSS-gradient?

CSS-gradients creëren vloeiende kleurovergangen tussen twee of meer kleuren. Ze worden vaak gebruikt als achtergrond voor knoppen, headers, hero-secties en decoratieve elementen. Gebruik linear-gradient() om rechte overgangen onder elke hoek te maken, of radial-gradient() voor cirkelvormige of elliptische overgangen.

Linear Gradient vs. Radial Gradient

Linear Gradient loopt langs een rechte as — van boven naar beneden, links naar rechts of onder elke hoek. Radial Gradient straalt naar buiten vanuit een middelpunt, als cirkel of ellips. Beide typen ondersteunen een willekeurig aantal kleurstops met instelbare posities.

Tips voor mooie gradients

• Gebruik maximaal 2–3 kleuren voor een strakke look.
• Vergelijkbare tinten (bijv. blauw → teal) creëren een harmonieus effect.
• Plaats kleurstops niet te dicht bij elkaar om harde randen te voorkomen.
• Test de gradient op verschillende schermformaten.