CSS-verloopgenerator

Lineaire kleurverlopen laten kleuren overgaan langs een rechte lijn (horizontaal, verticaal of diagonaal), waardoor een gerichte stroom van de ene kleur naar de andere ontstaat. Radiale kleurverlopen stralen vanuit een middelpunt naar buiten in een cirkelvormig of elliptisch patroon. Gebruik lineaire kleurverlopen voor gerichte nadruk en moderne interfaces, en radiale kleurverlopen voor spotlight-effecten, knoppen of organisch visueel belang.

Je kunt de hoek van het kleurverloop instellen in graden (0deg tot 360deg) of sleutelwoorden gebruiken zoals 'naar rechts', 'naar beneden', 'naar rechtsboven', enz. 0deg wijst naar boven, 90deg wijst naar rechts, 180deg wijst naar beneden en 270deg wijst naar links. De hoek bepaalt de as waarlangs kleuren overgaan, waardoor je volledige controle hebt over de richting van het kleurverloop.

Ja! CSS kleurverlopen ondersteunen onbeperkte kleurstops. Je kunt meerdere kleuren toevoegen om complexe meerkleurenverlopen te maken. Elke kleur kan een optioneel positiepercentage hebben (0% tot 100%) om te bepalen waar het verschijnt in het kleurverloop. Dit is perfect voor het maken van regenboogeffecten, verlopen bij zonsondergang of verfijnde kleurovergangen.

Gebruik twee kleuren die dicht bij elkaar liggen qua tint, verzadiging of lichtheid. Ga bijvoorbeeld over van medium blauw naar iets lichter of donkerder blauw. Houd het contrast laag en overweeg het gebruik van HSL-waarden waarbij je de lichtheid slechts met 10-20% aanpast. Subtiele kleurverlopen voegen diepte en visuele interesse toe zonder de inhoud te overweldigen.

Moderne CSS kleurverlopen (met lineair kleurverloop en radiaal kleurverloop) worden ondersteund in alle huidige browsers zonder leveranciersvoorvoegsels. Als je echter zeer oude browsers (IE9 en eerder) moet ondersteunen, heb je mogelijk leveranciersvoorvoegsels (-webkit-, -moz-, -o-) of fallback effen kleuren nodig. Voor moderne webontwikkeling werkt de standaard CSS-syntaxis voor kleurverlopen overal.

Plaats je kleurstops gelijkmatig en vermijd drastische kleursprongen. Gebruik tussenliggende kleurstops tussen extreme kleuren om vloeiendere overgangen te creëren. Experimenteer voor radiale kleurverlopen met de vorm (cirkel vs ellips) en positie. Overweeg kleuren te gebruiken met vergelijkbare verzadigings- en lichtheidswaarden of te werken in de HSL-ruimte waar je vloeiende kleurovergangen kunt maken.

Radiale kleurverlopen kunnen cirkelvormig (gelijk in alle richtingen) of elliptisch (uitgerekt om in de container te passen) zijn. Cirkels werken goed voor spotlighteffecten en gecentreerde ontwerpen, terwijl ellipsen beter zijn voor achtergronden die rechthoekige gebieden gelijkmatig moeten bedekken. Met de vormparameter kun je dit gedrag regelen.

Ja! Gebruik hoeken tussen 0deg en 360deg voor diagonale verlopen. 45deg creëert een perfecte diagonaal van linksonder naar rechtsboven, 135deg gaat van rechtsonder naar linksboven. Diagonale kleurverlopen voegen een dynamisch visueel belang toe en kunnen het oog door je ontwerp leiden.

Gebruik RGBA- of HSLA-kleurformaten met een alfakanaal om kleurverlopen te maken die vervagen naar transparant. Dit is perfect voor overlay-effecten, afbeeldingsmaskers of het creëren van diepte. Bijvoorbeeld, kleurverloop van rgba(0,0,0,1) naar rgba(0,0,0,0) creëert een overgang naar transparant zwart.

Kleurstops bepalen waar elke kleur verschijnt in het kleurverloop (0% tot 100%). Een gelijkmatige afstand zorgt voor vloeiende overgangen, terwijl het samenvoegen van stops zorgt voor scherpe kleurveranderingen. Als je bijvoorbeeld twee kleuren op 50% zet, creëer je een harde lijn, terwijl een tussenruimte van 40% en 60% een vloeiende overgang creëert.