Hoe verwijder ik een kleurstop?

Selecteer de stop en druk op Delete of Backspace, of gebruik de prullenbakknop. Een gradiënt houdt altijd minstens twee stops.

Werken deze gradiënten in elke browser?

Lineaire en radiale gradiënten werken in alle actuele browsers. Conische gradiënten werken in Chrome, Edge, Firefox en Safari 12.1 of nieuwer.

Kan ik stops met het toetsenbord verplaatsen?

Ja. Focus een stop met Tab en gebruik de pijltjestoetsen (Shift voor stappen van 10), Home en End. De hoekregelaar werkt ook met de pijltjestoetsen.

CSS-gradiëntgenerator —lineair, radiaal en conisch

Maak lineaire, radiale en conische CSS-gradiënten met versleepbare kleurstops, een hoekregelaar en presets. Kopieer de CSS of een Tailwind-klasse. Gratis en direct.

KleurstopsKlik om toe te voegen · sleep om te verplaatsen

CSS

background: #fa69c3;
background: linear-gradient(120deg, #7f5af0 0%, #ff6ac1 52%, #ffb86b 100%);

Tailwind

bg-[linear-gradient(120deg,#7f5af0_0%,#ff6ac1_52%,#ffb86b_100%)]

Presets

Referenties

MDN — CSS gradients
Tailwind CSS — Arbitrary values

Pagina bijgewerkt: 2026-10-23

Presets

Handleiding en voorbeeld

Gerelateerde tools

Referenties