CSS lineaire verloopgenerator
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
Deze pagina opent de gradiëntgenerator met het lineaire type al geselecteerd. Versleep de hoekschuifregelaar om de vervaging te draaien, de kleurstops aan te passen en het voorbeeld over de volledige breedte plus de CSS-lijnupdate bij elke invoer te bekijken.
linear-gradient() tekent kleuren langs een rechte lijn — veruit het meest gebruikte verloop in CSS. 90 graden loopt van links naar rechts, 180 graden van boven naar beneden, en elke hoek daartussen geeft een diagonaal; de stopposities in procent bepalen waar elke kleurband in de volgende begint over te gaan.
Als het voorbeeld er goed uitziet, kopieert u de achtergrondlijn naar uw stylesheet. Als u een startpunt wilt in plaats van een schone lei, openen de voorinstellingen voor zonsondergang, oceaan en pastel dezelfde tool met reeds geladen beproefde kleurenparen.