CSS gradient generator – gratis online
Skapa CSS gradient online med det kostnadsfria verktyget CSS gradient generator. Praktiskt verktyg för utvecklare – körs helt lokalt, utan dataöverföring.
Visuell CSS-gradientgenerator för bakgrunder, knappar och kort
Slipp memorera CSS:ens gradientsyntax. Välj två färger, välj linjär eller radiell, justera vinkeln och kopiera den färdiga CSS-koden. Förhandsvisningen uppdateras i realtid medan du ändrar. Allt körs i webbläsaren — ingen uppladdning, inget konto.
För vem
- Webbutvecklare — skapar bakgrunder och knappstilar utan att slå upp gradientsyntaxen varje gång.
- UI-designers — provar färgkombinationer snabbt och kopierar resultatet direkt till koden.
- Nybörjare — lär sig hur linjära och radiella gradienter fungerar genom att experimentera visuellt.
Så använder du den
- Välj typ: linjär eller radiell.
- Välj dina två färger med färgväljarna.
- Justera vinkeln (endast linjära gradienter).
- Testa Slumpa för inspiration eller Vänd för att byta riktning.
- Kopiera CSS-koden — klistra in den i
background-egenskapen i din stilmall.
Vanliga användningsområden
- Bakgrunder för hero-sektioner
- Knappar och call-to-action-element
- Kortbakgrunder
- Startskärmar i mobilappar
Integritet och bearbetning i webbläsaren
All generering sker lokalt i din webbläsare. Inga färger eller annan data lämnar din enhet.
Hitta rätt färger först med färgväljaren från bild.
Vanliga frågor
Är verktyget gratis?
Ja. Verktyget körs gratis i din webbläsare och du behöver inget konto.
Behöver jag installera något?
Nej. Allt körs i en vanlig modern webbläsare — på dator och mobil, utan extra programvara.
Skickas min data till en server?
Nej. All generering sker lokalt i din webbläsare. Inga färger eller annan data lämnar din enhet.
Vad är skillnaden mellan linjär och radiell gradient?
En linjär gradient övergår längs en rak linje i en viss vinkel, medan en radiell gradient strålar utåt från en mittpunkt i en cirkel eller ellips.
Kan jag använda gradienten i kommersiella projekt?
Ja. CSS-koden är fri att använda i vilket projekt som helst, kommersiellt eller privat.
Stöds genomskinlighet?
Du kan lägga till genomskinlighet manuellt i den kopierade koden genom att byta hex-färgerna mot rgba()-värden.