CSS-gradientgenerator
Forma en gradient visuellt och kopiera sedan CSS som fungerar i alla moderna webbläsare.
Förseglat på den här enheten
Körs i din webbläsare. Inget laddas upp.
Förseglat
Förhandsvisning
Färgstopp
Dra i stoppen, eller välj ett och använd piltangenterna. Klicka på fältet för att lägga till ett stopp.
Inställningar
OKLCH och OKLab undviker den gråa, matta zonen mitt i vissa gradienter. En standardversion följer med för äldre webbläsare.
CSS-kod
Så fungerar det
-
Välj en typ
Välj en linjär, radiell eller konisk gradient, eller börja med ett förval, och ställ in vinkeln eller mittpunkten.
-
Redigera färgerna
Dra färgstoppen längs fältet, klicka på fältet för att lägga till fler och ändra färg och position för varje stopp.
-
Kopiera CSS-koden
Kopiera den genererade koden och klistra in den i din stilmall som bakgrund.
Vanliga frågor
Vad är skillnaden mellan linjära, radiella och koniska gradienter?
En linjär gradient skiftar färg längs en rak linje i den vinkel du väljer. En radiell gradient sprids ut från en mittpunkt i en cirkel eller ellips. En konisk gradient sveper runt en mittpunkt, som visarna på en klocka, vilket är praktiskt för färghjul och cirkeldiagram.
Fungerar den genererade CSS-koden i alla webbläsare?
Linjära, radiella och koniska gradienter fungerar i alla aktuella webbläsare. När du väljer blandning i OKLCH eller OKLab innehåller koden dessutom en standardrad först, så att äldre webbläsare ändå visar en gradient.
Varför ser min gradient grå ut i mitten?
När två mycket olika färger blandas i standardrymden sRGB passerar övergången ofta en grumlig grå ton. Byt blandning till OKLCH eller OKLab: färgerna blandas så som ögat uppfattar dem, så mitten förblir klar.
Kan jag använda genomskinliga färger?
Ja. Skriv en färg med transparens, till exempel rgb(52 66 217 / 0.4) eller #3442d966, i ett stopps färgfält. Det passar utmärkt för överlägg ovanpå bilder.
Hur många färgstopp kan jag lägga till?
Så många du behöver. Varje stopp kan flyttas med musen, med fingret eller med piltangenterna, och tas bort så länge minst två stopp finns kvar.