CSS Gradient
Generator
Genereer prachtige CSS-verlopen — lineair, radiaal of conisch — en kopieer de code direct. Live voorbeeld terwijl je kleuren en hoek aanpast.
① Kies verlooptype & hoek ② Kies twee kleuren ③ Kopieer de CSS
background: linear-gradient(135deg, #FF6B6B 0%, #4ECDC4 100%);Overgang van kleuren langs een rechte lijn gedefinieerd door een hoek (0–360°). 0° gaat van onder naar boven, 90° van links naar rechts.
Kleuren stralen vanuit een centraal punt naar buiten in een elliptisch of cirkelvormig patroon. Ideaal voor spotlight- en glow-effecten.
Kleuren roteren rond een centraal punt als een kleurenwiel. Perfect voor taartdiagrammen en hoekige ontwerpen.
Hoe CSS-verlopen werken — lineair, radiaal en conisch
CSS-verlopen worden volledig door de browser gegenereerd zonder afbeeldingsbestanden. Een lineair verloop mengt kleurstops langs een as: linear-gradient(). Een radiaal straalt vanuit een brandpunt: radial-gradient(). Een conisch roteert kleuren rond een middelpunt: conic-gradient(). Alle drie worden toegepast via background of background-image. Stopposities (0%–100%) bepalen waar elke kleur begint en eindigt.