CSS Radiale Gradiëntgenerator
Creëer visueel CSS-gradiënten: lineair, radiaal of conisch, hoekschuifregelaar en maximaal zes kleurstops met een live voorbeeld over de volledige breedte en kopieerbare code.
Resultaat
Op deze pagina wordt de verloopgenerator geopend met het radiaaltype al geselecteerd: de kleuren stralen vanuit het midden van het element naar buiten in concentrische cirkels, en bij elke stop die u wijzigt, wordt het voorbeeld onmiddellijk opnieuw getekend.
radial-gradient() is het hulpmiddel voor spotlight- en gloedeffecten, zachte vignetten en achtergronden die een focuspunt nodig hebben in plaats van een richting. De stopposities in procenten komen overeen met de afstand vanaf het midden – 0% is het midden, 100% de uiterste rand – dus als je de eerste stops aandraait, ontstaat een kleine heldere kern, als je ze spreidt, ontstaat er een brede wassing.
Kopieer de achtergrondlijn zodra het voorbeeld er goed uitziet. De hoekschuifregelaar is in deze modus verborgen omdat een cirkel geen richting heeft. Schakel terug naar lineair of kegelvormig en hij verschijnt opnieuw.