CSS-gradientgenerator

Skapa linjära eller radiella gradienter med upp till 4 färger och kopiera den färdiga CSS-koden.

🔒 100% privat ⚡ Ingen filuppladdning 🆓 Gratis, inga gränser

Så här skapar du en CSS-gradient online

1

Välj typ av gradient

Välj linjär eller radiell beroende på vilken effekt du vill uppnå.

2

Lägg till och justera färger

Lägg till upp till 4 färger, ändra deras ordning och justera vinkeln eller positionen för gradienten.

3

Kopiera CSS-koden

Tryck på kopieringsknappen och klistra in koden direkt i din stilmall.

Vanliga frågor om gradientgeneratorn

Gradienter är ett enkelt sätt att ge djup och stil till vilken webbdesign som helst. Det här verktyget genererar exakt den CSS-kod du behöver, utan att du behöver skriva den för hand.

Vilka typer av gradienter kan jag skapa?

+

Du kan skapa linjära gradienter (i valfri vinkel) och radiala gradienter.

Hur många färger kan jag använda?

+

Du kan kombinera mellan 2 och 4 färger i samma gradient.

Fungerar koden i alla webbläsare?

+

Ja, det genereras med standard CSS-syntax som är kompatibel med alla moderna webbläsare.

Behöver jag installera något program?

+

Nej, du behöver inte installera något. Det fungerar direkt i webbläsaren.

Är det gratis?

+

Ja, det här verktyget är helt kostnadsfritt.

Kan jag använda gradienten som bakgrundsbild?

+

Den genererade koden är ren CSS; om du behöver en bild kan du ta en skärmbild av förhandsvisningen.

Utforska färger efter familj

Över 469 namngivna färger, med deras HEX-, RGB-, HSL- och CMYK-koder, organiserade i 12 färgtonfamiljer.

Röda 50 Orangefärger 45 Bruna 40 Gula 40 Gröna färger 55 Turkos 35 Blå 55 Lila 45 Rosa 45 Gråtoner 35 Vita 15 Svarta 9 Pastellfärger 36