CSS-kleurverloopgenerator

Ontwerp een kleurverloop voor de achtergrond van je website en kopieer de CSS. Sleep de kleurstops over de balk, klik erop om kleuren toe te voegen en kies tussen een lineair, radiaal of conisch verloop.

Kleurverloop

Lineair Radiaal Conisch

Hoek:

Vorm

Middelpunt

Herhalen (repeating-gradient)

Voorbeelden:

Kleuren

Elke kleur accepteert HEX, rgba(), hsl(), oklch() of een CSS-naam; gebruik transparent of een alfa kleiner dan 1 om in de achtergrond over te lopen.

CSS-code

Soorten kleurverlopen in CSS

linear-gradient() laat kleuren in elkaar overlopen langs een lijn met de hoek die je kiest (0deg van onder naar boven, 90deg van links naar rechts). radial-gradient() verdeelt ze in cirkels of ellipsen vanuit een middelpunt, en conic-gradient() laat ze rond een punt draaien, zoals in een kleurenwiel of taartdiagram.

De varianten repeating-linear-gradient(), repeating-radial-gradient() en repeating-conic-gradient() herhalen het patroon: met kleurstops dicht bij elkaar (bijvoorbeeld op 0% en 10%) maak je strepen en ruiten zonder afbeeldingen.

Zo gebruik je de code

Kleurverlopen zijn in CSS afbeeldingen: je past ze toe met background of background-image, nooit met background-color. Alle huidige browsers ondersteunen ze zonder -webkit--prefix.

Voor tekst met een kleurverloop combineer je de achtergrond met background-clip: text en color: transparent. En zet je er tekst op, controleer dan het contrast met de lichtste kleur van het verloop.