CSS lineaire-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 lineaire type al geselecteerd. Versleep de hoekschuifregelaar om de overlooprichting te draaien, pas de kleurstops aan en zowel het brede voorbeeldvenster als de CSS-regel worden bij elke invoer bijgewerkt.
linear-gradient() schildert kleuren langs een rechte lijn — veruit de meestgebruikte gradiënt in CSS. 90deg loopt van links naar rechts, 180deg van boven naar beneden en elke hoek ertussen geeft een diagonaal; de stopposities in procent bepalen waar elke kleurband begint te blenden in de volgende.
Wanneer het voorbeeld er goed uitziet, kopieer je de achtergrondregel naar je stylesheet. Wil je een startpunt in plaats van een leeg canvas, dan openen de voorbeeldpagina's voor zonsondergang, oceaan en pastel deze tool met al ingeladen, beproefde kleurcombinaties.