CSS Gradientgenerator
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
Varför använda en visuell gradientgenerator?
Att skriva CSS-gradienter manuellt är besvärligt. Vår visuella generator låter dig styra färgstopp med en färgväljare och positionsreglage, med realtidsuppdatering direkt.
3 gradienttyper
Linjär, radiell och konisk gradient — med dedikerade kontroller för varje typ
Flerfärgad gradient
Lägg till obegränsade färgstopp och dra positioner för komplexa gradienter
Realtidsförhandsvisning
Se gradientrendering i realtid när du justerar färger, positioner och vinkel
Skapa en CSS-gradient i 3 steg
Välj gradienttyp
Välj linjär, radiell eller konisk gradient och justera vinkel eller riktning
Justera färgstopp
Ange varje stopps färg med färgväljaren och positionera med reglage
Kopiera CSS
Klicka 'Kopiera CSS' för att få komplett background-egenskap att använda i din stilmall
Användningsområden för CSS-gradienter
Hero-sektionsbakgrunder
Skapa imponerande fullskärmsbakgrunder med diagonala eller radiella gradienter
Gradienttext
Tillämpa gradient på text med background-clip:text för fantastiska typografieffekter
Gradientkanter
Använd gradient med border-image för att skapa färgglada ramar runt element
Bildöverlägg
Lägg gradient ovanpå bilder för mörkt överlägg som säkerställer läsbarhet
Bästa praxis för CSS-gradienter
✓ Använd 135deg för diagonala gradienter
135 graders vinkel skapar en klassisk diagonal från övre vänster till nedre höger — populärt val för hero-sektioner.
✓ Håll gradienter subtila i UI
I UI-element som knappar och kort, använd mycket subtila gradienter med 10-20 % ljusskillnad för djup utan visuellt brus.
✓ Ange en fallback-färg
Lägg till en solid bakgrundsfärg som fallback innan gradienten: background-color:#6366f1; background:linear-gradient(...).
✓ Animera gradientposition
Du kan inte animera CSS-gradienter direkt, men du kan animera background-position på en större gradient för smidig rörelseeffekt.
❓ Vanliga frågor
Vad är skillnaden mellan linjär, radiell och konisk gradient?
Linjär gradient övergår längs en rak linje med en vinkel. Radiell strålar ut från en mittpunkt cirkulärt eller elliptiskt. Konisk roterar runt en mittpunkt — idealisk för cirkulära förloppsindikatorer och färghjul.
Hur skapar man en genomskinlig gradient?
Använd transparent som ett färgstopp: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent). Det skapar en gradient från halvtransparent färg till helt genomskinlig — idealiskt för bildöverlägg.
Varför ser jag randning i min gradient?
Randning (synliga linjer mellan färger) uppstår på lågkvalitetsskärmar eller vid övergångar mellan liknande nyanser. Lägg till ett mellanliggande färgstopp för att mjuka upp övergången.
Kan jag använda en gradient som kant?
Ja; använd border-image:linear-gradient(...) 1. Alternativt kan du använda ::before pseudo-element med gradientbakgrund och negativt z-index för att simulera en gradientkant.