Skapa en linjär CSS-gradient

Med Gradientgenerator kan designers och frontendutvecklare justera ett gränssnitt före implementering. Skapa en linjär CSS-gradient.

Skapa en linjär CSS-gradient. Du kan använda det gratis i webbläsaren utan konto och granska resultatet innan du går vidare.

Så använder du

Ange gradientens vinkel i grader först; den avgör åt vilket håll färgerna rör sig över elementet.
Lägg till startfärgen på nästa rad och slutfärgen under den.
Generera gradienten: resultatområdet visar en rad CSS som du kan kopiera direkt till ditt projekt.
Klistra in raden i regeln du arbetar med och ladda sedan om sidan för att se hur den faktiskt ser ut.
Ändra vinkeln eller en färg och generera igen så ofta du vill innan du bestämmer en slutlig stil.

Exempel

Exemplet använder en vinkel på 45 grader med en mycket mörkblå i början och en stark grön i slutet. När den har genererats jämför du raden du får med det du tänkte dig: vinkeln anger riktningen medan färgordningen bestämmer nyansen i varje ände.

Indata

45
#0F172A
#16A34A

Resultat

background: linear-gradient(45deg, #0F172A, #16A34A);

Gränser och format

Endast rätlinjiga gradienter skapas; radiella, koniska och upprepande varianter behöver en annan syntax.
Två färger ger en enkel blandning, men mellanliggande stopp kan inte justeras från den här sidan.
Resultatet beror på besökarens skärm och webbläsare, och en mycket kontrastrik blandning kan trötta ögat när text ligger ovanpå.
Kontrollera kontrasten om du placerar text över gradienten, eftersom läsbarheten inte kan bedömas enbart utifrån koden.

Var bearbetningen sker

Gradienten genereras i din webbläsare. Vinkeln och båda färgerna stannar på din enhet, inget skickas och inget sparas när du lämnar sidan, så kodsnutten du kopierar ut byggs helt på din egen maskin.

Vanliga frågor

Kan jag återanvända den genererade koden i en annan regel?

Ja. Raden följer standardsyntaxen för en linjär gradient och passar i vilken bakgrundsdeklaration som helst. Kopiera den som den är och ändra bara färgerna om din palett ändras senare.

Hur får jag en gradient som går uppifrån och ned?

Justera vinkeln i små steg och behåll det värde som placerar din första färg högst upp i elementet. Eftersom resultatet kontrolleras genom att ladda om sidan räcker det oftast med ett eller två försök för att hamna i den riktning du vill.

Kan jag använda fler än två färger?

Den här sidan utgår från en startfärg och en slutfärg, så en blandning med tre toner kan inte ställas in direkt här. Du kan fortfarande generera ett första par och sedan lägga till de extra stoppen för hand i din egen stilmall.