01
Når dette værktøj er nyttigt
Brug dette til at lave en webbaggrund med to farver eller en card-accent. Vælg start- og slutfarver, en lineær eller radial type og en vinkel for at få både en forhåndsvisning og CSS.
Gradientgenerator
Generér kode til linear-gradient eller radial-gradient med live-forhåndsvisning.
Gradientgenerator
Et browserbaseret resultat til planlægning og reference.
Hvad du skal tjekke, før du bruger det
02
Hvordan resultatet bliver lavet
Den lineære tilstand opretter en linear-gradient med den indtastede vinkel; den radiære tilstand opretter en cirkulær radial-gradient. Browseren gengiver de mellemliggende farver mellem de to stops.
03
Eksempel og fortolkning
Indstil #3366FF til #FF6655 ved 90 grader for en venstre-til-højre baggrundserklæring. Kopiér det i den faktiske komponent og tjek igen tekstkontrasten.
04
Omfang og begrænsninger
Generatoren bruger to farvestop og kan ikke fjerne browserforskelle i farveinterpolation. Tilføj komplekse stop, alfa-overgange eller wide-gamut-farver i en fuld editor.
Ofte stillede sporgsmal
Hvordan flytter jeg en farve fra Gradientgeneratoren til en anden app?
Brug kopiér-knappen under resultatet til at kopiere CSS-, HEX- eller HSL-tekst. Bekræft, at destinationsappen tolker det samme farveformat.
Vil en skærmfarve fra Gradientgeneratoren matche print?
Ikke automatisk. Emissive RGB-skærme og reflekterende papir og blæk bruger forskellige gamuts og blandingsmodeller, så udskriftsprofiler og proofs er stadig nødvendige.
Kan jeg godkende et design-token ud fra Gradientgeneratoren alene?
Brug det som et forslag, og test derefter den faktiske baggrund, mørk tilstand, interaktionstilstande og tekstkontrast, før du navngiver og godkender et token.