CSS-gradientgenerator

Så använder du CSS-gradientgeneratorn

1. Välj Typ av gradient: Linjär, Radiell eller Konisk. Den stora förhandsvisningen överst uppdateras vid varje ändring.
2. För en linjär gradient ställer du in Vinkel med reglaget eller skriver den i grader (90° går från vänster till höger, 180° uppifrån och ned). För en konisk gradient anger vinkeln var svepet börjar.
3. För radiella och koniska gradienter flyttar du mittpunkten med Mitt X och Mitt Y. En radiell gradient kan vara en Cirkel eller en Ellips (menyn Form).
4. Redigera Färgstopp. Klicka var som helst på listen för att lägga till ett stopp där, med den färg gradienten redan har på den punkten, eller använd Lägg till stopp för att fylla den största luckan. Dra i ett handtag för att flytta det. Varje stopp har också en rad där du kan välja färg, skriva valfri CSS-färg, ställa in Position (%) eller klicka på Ta bort (en gradient behåller alltid minst två stopp).
5. Kryssa i Upprepande om du vill, välj Färginterpolering, klicka på Vänd för att spegla stoppen eller på Slumpmässig gradient för inspiration.
6. Kopiera resultatet från CSS-kod med Kopiera.

Tangentbord: ge ett handtag på listen fokus och använd sedan piltangenterna för att flytta det 1 % (10 % med Shift), Home och End för att hoppa till ändarna och Delete för att ta bort det.

De tre gradientfunktionerna

• linear-gradient() blandar färger längs en rak linje. linear-gradient(90deg, #4f46e5 0%, #ec4899 100%) går från indigo till vänster till rosa till höger. Vinklarna räknas medurs från toppen: 0deg pekar uppåt, 90deg åt höger.
• radial-gradient() strålar ut från en mittpunkt. radial-gradient(circle at 30% 40%, …) placerar mitten 30 % från vänster och 40 % från toppen. En ellips sträcks ut med rutan, en cirkel förblir rund.
• conic-gradient() sveper runt en mittpunkt som visarna på en klocka. conic-gradient(from 0deg at 50% 50%, …) ger färghjul, cirkeldiagram och snurreffekter. Stoppens positioner är andelar av ett helt varv.

Alternativet Upprepande använder repeating-linear-gradient() och dess syskon: mönstret som dina stopp definierar upprepas tills rutan är fylld. Sätt det sista stoppet en bra bit under 100 % (till exempel 20 %) för att få ränder eller ringar.

Två stopp på samma position ger en skarp kant i stället för en övergång – det är så ränder och flaggor görs. Generatorn håller stoppen sorterade efter position i koden, som CSS kräver.

sRGB- eller OKLCH-interpolering

Som standard blandar webbläsare gradientens färger i sRGB. Mellan två mättade färger, som blått och gult, blir mitten då ofta grå eller grumlig. CSS Color Level 4 låter dig välja interpoleringsrymd: linear-gradient(90deg in oklch, …) blandar i den perceptuella OKLCH-rymden och håller mitten livfull.

Med OKLCH (mjukare, med sRGB som reserv) skriver verktyget två background-deklarationer: först den klassiska sRGB-versionen, sedan OKLCH-versionen. Webbläsare som stöder interpoleringsrymder (Chrome och Edge 111+, Safari 16.2+, Firefox 127+) använder den andra raden; äldre ignorerar den och behåller den första.

Tips

• Färger med transparens accepteras i stoppfälten, till exempel #00000080 eller rgb(0 0 0 / 50%), vilket är praktiskt för överlägg på bilder.
• Koden skrivs med background. Använd background-image i stället om du ställer in andra bakgrundsegenskaper separat.
• Diskreta gradienter (två närliggande toner av samma färg) ser oftast mer professionella ut än regnbågsövergångar.