CSS radiale-gradiëntgenerator
Bouw CSS-gradiënten visueel op: lineair, radiaal of conisch type, hoekschuifregelaar en tot zes kleurstops met een live breed voorbeeldvenster en kopieerbare code.
Wordt volledig in uw browser verwerkt. Niets wat u hier invoert, wordt ooit geüpload.
Resultaat
Over dit hulpmiddel
Deze pagina opent de gradiëntgenerator met het radiale type al geselecteerd: de kleuren stralen in concentrische cirkels naar buiten vanuit het midden van het element en elke stop die je wijzigt, werkt het voorbeeld direct bij.
radial-gradient() is de tool voor spotlight- en gloei-effecten, zachte vignetten en achtergronden die een brandpunt nodig hebben in plaats van een richting. De stopposities in procent komen overeen met de afstand tot het midden — 0% is het midden, 100% de buitenrand — dus door de eerste stops dichterbij te zetten krijg je een kleine heldere kern, en door ze te spreiden een brede spoeling.
Kopieer de achtergrondregel zodra het voorbeeld er goed uitziet. De hoekschuifregelaar is in deze modus verborgen omdat een cirkel geen richting heeft — schakel terug naar lineair of conisch en hij verschijnt weer.