01
Wanneer dit hulpmiddel nuttig is
Gebruik dit om een webachtergrond met twee kleuren of een card-accent te maken. Kies begin- en eindkleuren, een lineair of radiaal type en een hoek om zowel een voorbeeld als CSS te krijgen.
Verloopgenerator
Genereer code voor linear-gradient of radial-gradient met een live voorbeeld.
Verloopgenerator
Een browserresultaat voor planning en referentie.
Waar je op moet letten voor gebruik
02
Hoe het resultaat tot stand komt
De lineaire modus maakt een linear-gradient met de ingevoerde hoek; de radiale modus maakt een cirkelvormige radial-gradient. De browser rendert de tussenliggende kleuren tussen de twee stops.
03
Praktisch voorbeeld en interpretatie
Stel #3366FF in op #FF6655 op 90 graden voor een achtergrondverklaring van links naar rechts. Kopieer dit naar de echte component en controleer opnieuw het contrast van alle tekst die erboven staat.
04
Reikwijdte en beperkingen
De generator gebruikt twee kleurstops en kan browserverschillen in kleurinterpolatie niet verwijderen. Voeg complexe stops, alpha-overgangen of wide-gamut-kleuren toe in een volledige editor.
Veelgestelde vragen
Hoe verplaats ik een kleur van de Gradiëntgenerator naar een andere app?
Gebruik de kopieerknop onder het resultaat om CSS-, HEX- of HSL-tekst te kopiëren. Bevestig dat de doel-app hetzelfde kleurformaat interpreteert.
Komt een schermkleur uit de Gradiëntgenerator overeen met print?
Niet automatisch. Emissieve RGB-schermen en reflecterende papier en inkt gebruiken verschillende gamuts en mengmodellen, dus printprofielen en proefdrukken zijn nog steeds nodig.
Kan ik een design token alleen op basis van de Gradiëntgenerator goedkeuren?
Gebruik dit als kandidaat, test daarna de echte achtergrond, donkere modus, interactiestaten en tekstcontrast voordat je een token benoemt en goedkeurt.