01
När detta verktyg är användbart
Använd detta för att skapa en webbakgrund med två färger eller ett kortaccenter. Välj start- och slutfärger, en linjär eller radiell typ och en vinkel för att få både förhandsvisning och CSS.
Gradientgenerator
Generera linear-gradient eller radial-gradient-kod med en liveförhandsvisning.
Gradientgenerator
Ett resultat på klientsidan för planering och referens.
Att kontrollera innan du använder den
02
Hur resultatet skapas
Det linjära läget skapar en linear-gradient med den angivna vinkeln; det radiella läget skapar en cirkulär radial-gradient. Webbläsaren renderar de mellankolor mellan de två stoppen.
03
Arbetsexempel och tolkning
Ställ in #3366FF till #FF6655 vid 90 grader för en bakgrundsdeklaration från vänster till höger. Kopiera detta till den faktiska komponenten och kontrollera kontrasten för all text ovanför igen.
04
Omfattning och begränsningar
Generatorn använder två färgstopp och kan inte ta bort färginterpoleringsskillnader mellan webbläsare. Lägg till komplexa stopp, alfatransitioner eller wide-gamut-färger i en fullständig redigerare.
Vanliga fragor
Hur flyttar jag en färg från gradientgeneratorn till en annan app?
Använd kopieringsknappen under resultatet för att kopiera CSS-, HEX- eller HSL-text. Bekräfta att målappen tolkar samma färgformat.
Kommer en skärmfärg från gradientgeneratorn att matcha utskrift?
Inte automatiskt. Emissiva RGB-skärmar och reflekterande papper och bläck använder olika färgomfång och blandningsmodeller, så utskriftsprofiler och proofs behövs fortfarande.
Kan jag godkänna en design-token enbart från gradientgeneratorn?
Använd den som en kandidat, testa sedan den faktiska bakgrunden, mörkt läge, interaktionstillstånd och textkontrast innan du namnger och godkänner en token.