CSS Gradientgenerator
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
Hvorfor bruke en visuell gradientgenerator?
Å skrive CSS-gradienter manuelt er tungvint. Vår visuelle generator lar deg styre fargestopp med en fargevelger og posisjonsglider, med sanntidsoppdatering direkte.
3 gradienttyper
Lineær, radial og konisk gradient — med dedikerte kontroller for hver type
Flerfarge-gradient
Legg til ubegrenset antall fargestopp og dra posisjoner for komplekse gradienter
Sanntidsforhåndsvisning
Se gradientrendering i sanntid når du justerer farger, posisjoner og vinkel
Lag en CSS-gradient i 3 trinn
Velg gradienttype
Velg lineær, radial eller konisk gradient og juster vinkel eller retning
Juster fargestopp
Angi hvert stopps farge med fargevelgeren og posisjoner med glider
Kopier CSS
Klikk 'Kopier CSS' for å få komplett background-egenskap til bruk i stilarket ditt
Bruksområder for CSS-gradienter
Hero-seksjonsbakgrunner
Lag imponerende fullskjermsbakgrunner med diagonale eller radiale gradienter
Gradienttekst
Bruk gradient på tekst med background-clip:text for fantastiske typografieffekter
Gradientkanter
Bruk gradient med border-image til å skape fargerike rammer om elementer
Bildeoverlegg
Legg gradient oppå bilder for mørkt overlegg som sikrer tekstlesbarhet
Beste praksis for CSS-gradienter
✓ Bruk 135deg for diagonale gradienter
135 graders vinkel lager en klassisk diagonal fra øvre venstre til nedre høyre.
✓ Hold gradienter subtile i UI
I UI-elementer som knapper og kort, bruk svært subtile gradienter med 10-20% lysforskjell for dybde.
✓ Angi en reservefarge
Legg til en ensfarget bakgrunnsfarge som reserve: background-color:#6366f1; background:linear-gradient(...).
✓ Animer gradientposisjon
Du kan ikke animere CSS-gradienter direkte, men du kan animere background-position på en større gradient for en glidende bevegelseseffekt.
❓ Ofte stilte spørsmål
Hva er forskjellen mellom lineær, radial og konisk gradient?
Lineær gradient overføres langs en rett linje med en vinkel. Radial stråler ut fra et midtpunkt sirkulært eller ellipseformet. Konisk roterer rundt et midtpunkt — ideelt for sirkulære statusindikatorer.
Hvordan lager man en gjennomsiktig gradient?
Bruk transparent som et fargestopp: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent). Det lager en gradient fra halvgjennomsiktig farge til fullt gjennomsiktig — ideelt for bildeoverlegg.
Hvorfor ser jeg båndning i gradienten min?
Båndning (synlige linjer mellom farger) oppstår på lavkvalitetsskjermer eller ved overganger mellom lignende nyanser. Legg til et mellomliggende fargestopp for å myke opp overgangen.
Kan en gradient brukes som kant?
Ja; bruk border-image:linear-gradient(...) 1. Alternativt kan du bruke ::before pseudo-element med gradientbakgrunn og negativt z-index for å simulere en gradientkant.