CodeKitHubHva er dette verktøyet?
CSS-gradienter er bilder generert av nettleseren fra en liste med farger, i stedet for filer du laster opp — linear-gradient() går over i farger langs en rett linje i en gitt vinkel, mens radial-gradient() går over i farger utover fra et sentrumspunkt. Begge godtar to eller flere fargestopp, hver eventuelt festet til en posisjon langs gradienten.
Skrevet for hånd er gradienter lette å få subtilt feil: feil rekkefølge på stoppene, manglende prosenter, eller en vinkelverdi i feil retning (CSS-vinkler går med klokken fra «to top», i motsetning til matematiske vinkler). Dette verktøyet holder syntaksen unna — sett farger og posisjoner med fargevelgere og glidebrytere, se forhåndsvisningsboksen oppdateres i sanntid, og kopier den resulterende CSS-en når den ser riktig ut.
Kilde: CSS Images Module Level 3, W3C — spesifikasjonen som definerer syntaksen for linear-gradient() og radial-gradient().
Hvorfor bruke det?
- Live forhåndsvisning oppdateres umiddelbart ved hver endring av farge, posisjon eller vinkel — ingen grunn til å laste siden på nytt for å se resultatet.
- Bytt mellom lineære og radiale gradienter med ett klikk; vinkelkontrollen skjules automatisk for radiale gradienter, der den ikke gjelder.
- Legg til eller fjern fargestopp (2 til 4) i stedet for å være begrenset til en fast tofarget gradient.
- Hvert stopp har sin egen posisjonsglidebryter, så stoppene trenger ikke være jevnt fordelt.
- Gir ut ferdig CSS til å lime inn, med standard linear-gradient()/radial-gradient()-syntaks.
- Kjører helt i nettleseren din — ingenting du stiller inn lastes opp noe sted. Gratis, ingen registrering, fungerer på mobil.
Slik bruker du det
- Velg Lineær eller Radial som gradienttype.
- For en lineær gradient, dra i vinkelglidebryteren — 90deg går fra venstre til høyre, 180deg går fra topp til bunn, og så videre.
- Sett farge og posisjon for hvert stopp; det første stoppet er gradientens startfarge, det siste er sluttfargen.
- Klikk «+ Legg til stopp» for å legge til opptil 4 stopp totalt for en flerfarget gradient, eller ✕-knappen for å fjerne ett (minimum 2).
- Kopier den genererte CSS-en og lim den inn i en background- eller background-image-deklarasjon.
Eksempel
Inndata
Lineær · Vinkel: 90deg · Stopp: #f97316 ved 0%, #ec4899 ved 100%Resultat
background: linear-gradient(90deg, #f97316 0%, #ec4899 100%);En oransje-til-rosa gradient fra venstre til høyre — en vanlig stil for knapper, bannere og hero-bakgrunner.
Lineære vs. radiale gradienter
En lineær gradient går over i farge langs en rett linje, styrt av en vinkel — nyttig for bannere, knapper og retningsbestemte bakgrunner. En radial gradient går over i farge utover fra et sentrumspunkt i utvidende ringer, noe som passer for lyseffekter, merker eller glødende bakgrunner. Dette verktøyet setter den radiale gradienten som standard til en sirkelform sentrert i boksen, som dekker det vanligste radiale bruksområdet; CSS støtter også ellipseformer og posisjoner utenfor sentrum hvis du trenger å redigere resultatet videre for hånd.
Vanlige gradientmønstre
- Subtil merkevareaksent: to nære nyanser (f.eks. to fargetoner av samme farge) i en slak vinkel for en myk bakgrunnsskylle.
- CTA-knapp med høy kontrast: to mettede, komplementære farger i 90deg eller 135deg for et fett, klikkbart uttrykk.
- Overlegg på et bilde: en gradient fra gjennomsiktig til en solid farge (sett opasitet via en rgba-farge i fargevelgerens underliggende hex, eller juster etter kopiering) lagt over et background-image.
- Flerfarget regnbue-/merkevaregradient: 3–4 stopp fordelt over hele 0–100 %-området for jevnere, mer gradvise overganger enn en tofarget gradient tillater.
- Radialt lyspunkt: et lyst sentrumsstopp nær 0 % som toner ut mot et mørkere kantstopp nær 100 %, nyttig for hero-seksjoner eller korthøydepunkter.
Kombinere med andre CSS-verktøy
Gradienter kombineres ofte med runde hjørner og skygger på samme element — et gradientkort med en myk box-shadow og runde hjørner er et vanlig UI-mønster. Generer hver del separat og kombiner CSS-deklarasjonene på elementet.
→ Box Shadow-generator · Border Radius-generator · Fargevelger
Ofte stilte spørsmål
Hva er forskjellen mellom linear-gradient() og radial-gradient()?
linear-gradient() går over i farger langs en rett linje i en angitt vinkel. radial-gradient() går over i farger utover fra et sentrumspunkt i utvidende former (sirkel eller ellipse). Begge godtar samme type kommaseparerte fargestopp-liste; det er bare formen på overgangen som er forskjellig.
Hvordan fungerer CSS-gradientvinkler?
CSS-gradientvinkler går med klokken, med start fra «to top» (0deg peker oppover). 90deg peker mot høyre, 180deg peker nedover, og 270deg peker mot venstre — motsatt konvensjon av vanlige matematiske vinkler, noe som ofte fører til forvirring når man skriver gradienter for hånd.
Kan jeg bruke mer enn 4 fargestopp?
Ja — CSS-gradienter godtar et hvilket som helst antall kommaseparerte fargestopp. Dette verktøyet setter en øvre grense på 4 i den interaktive byggeren for å holde grensesnittet oversiktlig, men du kan kopiere den genererte CSS-en og manuelt legge til flere kommaseparerte «farge posisjon%»-oppføringer i stilarket ditt.
Hvorfor ser gradienten min stripete ut i stedet for jevn?
Stripete overganger kommer vanligvis av farger som ligger for langt fra hverandre i fargetone med for få stopp mellom seg, eller av nettleserens egen begrensede fargepresisjon ved svært lav kontrast. Å legge til et mellomliggende stopp med en blandet farge, eller velge farger som ligger nærmere hverandre i fargetone, gir som regel et jevnere resultat.
Kan jeg animere en CSS-gradient?
Ikke direkte — gradienter er ikke naturlig animerbare på samme måte som background-position eller transform, siden nettlesere ikke kan interpolere mellom to vilkårlige gradientdefinisjoner. Vanlige omveier er å animere background-position på en overdimensjonert gradient, eller å bruke transition på background-color hvis det bare er én farge som endres.