CodeKitHubHvad er dette værktøj?
CSS-gradienter er billeder, som browseren genererer ud fra en liste af farver, i stedet for filer, du uploader — linear-gradient() overgår mellem farver langs en lige linje i en given vinkel, mens radial-gradient() overgår mellem farver udad fra et centerpunkt. Begge accepterer to eller flere farvestop, som hver især valgfrit kan fastgøres til en position langs gradienten.
Skrevet i hånden er gradienter nemme at få lidt forkert: forkert rækkefølge på stop, manglende procenter, eller en vinkelværdi i den forkerte retning (CSS-vinkler går med uret fra 'to top', i modsætning til matematiske vinkler). Dette værktøj holder syntaksen ude af vejen — indstil farver og positioner med vælgere og skydere, se forhåndsvisningsboksen opdatere sig i realtid, og kopiér den resulterende CSS, når den ser rigtig ud.
Kilde: CSS Images Module Level 3, W3C — specifikationen, der definerer syntaksen for linear-gradient() og radial-gradient().
Hvorfor bruge det?
- Live forhåndsvisning opdateres øjeblikkeligt ved hver ændring af farve, position og vinkel — ingen grund til at genindlæse en side for at se resultatet.
- Skift mellem lineære og radiale gradienter med ét klik; vinkelkontrollen skjules automatisk for radiale gradienter, hvor den ikke gælder.
- Tilføj eller fjern farvestop (2 til 4) i stedet for at være begrænset til en fast to-farvet gradient.
- Hvert stop har sin egen positions-skyder, så stoppene ikke behøver at være jævnt fordelt.
- Producerer brugsklar CSS med den standard linear-gradient()-/radial-gradient()-syntaks.
- Kører helt i din browser — intet, du konfigurerer, uploades nogen steder. Gratis, ingen tilmelding, virker på mobil.
Sådan bruger du det
- Vælg Lineær eller Radial som gradienttype.
- For en lineær gradient, træk i vinkel-skyderen — 90 grader går fra venstre mod højre, 180 grader går fra top til bund, og så videre.
- Indstil farve og position for hvert stop; det første stop er gradientens startfarve, det sidste er slutfarven.
- Klik på '+ Tilføj stop' for at tilføje op til 4 stop i alt til en flerfarvet gradient, eller ✕-knappen for at fjerne et (minimum 2).
- Kopiér den genererede CSS, og indsæt den i en background- eller background-image-erklæring.
Eksempel
Input
Lineær · Vinkel: 90 grader · Stop: #f97316 ved 0 %, #ec4899 ved 100 %Output
background: linear-gradient(90deg, #f97316 0%, #ec4899 100%);En orange-til-lyserød gradient fra venstre mod højre — en almindelig stil til knapper, bannere og hero-baggrunde.
Lineære vs. radiale gradienter
En lineær gradient overgår farve langs en lige linje, styret af en vinkel — nyttigt til bannere, knapper og retningsbestemte baggrunde. En radial gradient overgår farve udad fra et centerpunkt i udvidende ringe, hvilket passer til spotlight-effekter, badges eller glow-agtige baggrunde. Dette værktøj bruger som standard en cirkelform centreret i boksen til den radiale gradient, hvilket dækker det mest almindelige radiale anvendelsesscenarie; CSS understøtter også ellipseformer og positioner uden for centrum, hvis du senere selv vil redigere output.
Almindelige gradientmønstre
- Diskret brand-accent: to nærtliggende farvetoner (f.eks. to nuancer af samme farve) i en lav vinkel for en blød baggrundsvask.
- Kontrastrig CTA-knap: to mættede, komplementære farver ved 90 eller 135 grader for et fedt, klikbart udseende.
- Overlay på et billede: en gradient fra gennemsigtig til en solid farve (indstil opacitet via en rgba-farve i vælgerens underliggende hex, eller justér efter kopiering), lagt over et background-image.
- Flerfarvet regnbue-/brand-gradient: 3-4 stop fordelt over hele 0-100 %-intervallet for jævnere, mere gradvise overgange, end en to-farvet gradient tillader.
- Radial spotlight: et lyst centerstop nær 0 %, der falmer til et mørkere kant-stop nær 100 %, nyttigt til hero-sektioner eller kort-fremhævninger.
Kombination med andre CSS-værktøjer
Gradienter kombineres ofte med afrundede hjørner og skygger på samme element — et gradientkort med en blød box-shadow og afrundede hjørner er et almindeligt UI-mønster. Generér hver del separat, og kombinér CSS-erklæringerne på elementet.
→ Box Shadow-generator · Border Radius-generator · Farvevælger
Ofte stillede spørgsmål
Hvad er forskellen på linear-gradient() og radial-gradient()?
linear-gradient() overgår farver langs en lige linje i en angivet vinkel. radial-gradient() overgår farver udad fra et centerpunkt i udvidende former (cirkel eller ellipse). Begge accepterer samme type kommaseparerede farvestopliste; kun overgangens form er forskellig.
Hvordan fungerer CSS-gradientvinkler?
CSS-gradientvinkler går med uret, startende fra 'to top' (0 grader peger opad). 90 grader peger til højre, 180 grader peger nedad, og 270 grader peger til venstre — den modsatte konvention af almindelige matematikvinkler, hvilket ofte forvirrer, når man skriver gradienter i hånden.
Kan jeg bruge mere end 4 farvestop?
Ja — CSS-gradienter accepterer et vilkårligt antal kommaseparerede farvestop. Dette værktøj begrænser den interaktive byggeflade til 4 for en overskuelig UI, men du kan kopiere den genererede CSS og manuelt tilføje flere kommaseparerede 'farve position%'-poster i dit stylesheet.
Hvorfor ser min gradient stribet ud i stedet for jævn?
Stribing kommer normalt fra farver, der ligger for langt fra hinanden i farvetone med for få stop imellem, eller fra browserens egen begrænsede farvepræcision ved meget lav kontrast. At tilføje et mellemliggende stop med en blandet farve, eller vælge farver tættere på hinanden i farvetone, giver som regel et jævnere resultat.
Kan jeg animere en CSS-gradient?
Ikke direkte — gradienter kan ikke animeres nativt på samme måde som background-position eller transform, da browsere ikke kan interpolere mellem to vilkårlige gradientdefinitioner. Almindelige løsninger inkluderer at animere background-position på en overdimensioneret gradient eller lave en transition på background-color, hvis kun én farve ændres.