CSS-gradienters syntaks: Komplet kodeguide til lineære og radiale

CSS-gradienters syntaks kan virke forvirrende til at begynde med, men når du først forstår delene, kan du læse og skrive gradientkode med sikkerhed. Uanset om du håndkoder gradienter eller kopierer dem fra en generator, hjælper det at kende syntaksen dig med at justere, optimere og kombinere gradienter med andre CSS-egenskaber. Denne guide opdeler hver del af lineær og radial gradienters syntaks, så du kan skrive dem korrekt fra starten.

Forstå den grundlæggende gradientstruktur

Alle CSS-gradienter følger et tilsvarende mønster. Du bruger egenskaben background eller background-image og kalder en gradientfunktion. Gradientfunktionen indeholder type, retning, farver og positioner.

Her er den generelle struktur:

background: gradient-type(direction, color1 position1, color2 position2);

For et rigtigt eksempel:

background: linear-gradient(90deg, #3b82f6 0%, #ec4899 100%);

Dette angiver en lineær gradient, der bevæger sig 90 grader (fra venstre til højre), startende med blå og sluttende med pink. De to farver har eksplicitte positioner ved 0% og 100%, hvilket betyder blå er i starten og pink er i slutningen.

Du behøver ikke altid at skrive positioner. Hvis du springer dem over, fordeler browseren farver jævnt:

background: linear-gradient(90deg, #3b82f6, #ec4899);

Dette fungerer på samme måde, men farvestoppene er implicitte. Browseren placerer automatisk den første farve ved 0% og den sidste ved 100%.

Lineær gradientsyntaks opdelt

En lineær gradient bevæger farve langs en lige linje. Syntaksen er:

background: linear-gradient(direction, color-stop-1, color-stop-2, ...);

Retning: Vinkler og nøgleord

Retningen styrer, hvilken vej gradienten flyder. Du kan bruge enten vinkler eller nøgleord.

Vinkelværdier ligger mellem 0 og 360 grader:

  • 0deg — farven flyder fra bund til top (opad)
  • 90deg — farven flyder fra venstre til højre (vandret)
  • 180deg — farven flyder fra top til bund (nedadtil)
  • 270deg — farven flyder fra højre til venstre (bagtil)
  • 45deg — diagonalt fra nederst til venstre til øverst til højre
  • 135deg — diagonalt fra øverst til venstre til nederst til højre

Vinklen starter i bunden og går med uret. Dette forvirrer mange mennesker, fordi de forventer, at 0 grader peger til højre (som i matematik), men i CSS-gradienter peger det opad.

Nøgleordsværdier er alternativer til vinkler:

  • to top — samme som 0deg
  • to right — samme som 90deg
  • to bottom — samme som 180deg
  • to left — samme som 270deg
  • to top right — samme som 45deg
  • to bottom right — samme som 135deg
  • to bottom left — samme som 225deg
  • to top left — samme som 315deg

Nøgleord er læselige, men vinkler er mere fleksible, hvis du har brug for ulige retninger som 17deg eller 203deg.

Farvestop: Farver og positioner

Farvestop definerer, hvilken farve der vises og hvor. Et farvestop har to dele: farveværdien og positionen.

background: linear-gradient(90deg, #3b82f6 25%, #ec4899 75%);

Her optræder blå ved 25% og pink ved 75%. Gradienten skifter problemfrit mellem dem.

Positionsenheder:

  • Procenter (0%, 50%, 100%) er mest almindelige. De definerer, hvor farven sidder i forhold til gradientlinjen.
  • Absolutte længder (10px, 2em, 1cm) fungerer også, men de er mindre almindelige og mindre forudsigelige, fordi længden afhænger af elementets størrelse.

Hvis du ikke skriver en position, fordeler browseren farver jævnt. Med tre farver og ingen positioner sidder de ved 0%, 50% og 100%:

background: linear-gradient(90deg, #3b82f6, #ec4899, #10b981);

Du kan også lade browseren finde nogle positioner ud. Hvis du springer positionen over på midterfarven, sidder den halvvejs mellem farverne før og efter:

background: linear-gradient(90deg, #3b82f6 0%, #ec4899, #10b981 100%);

Pinken her sidder ved 50%.

Gentagne lineære gradienter

En normal lineær gradient fylder hele elementet. En gentaget lineær gradient fliser gradientmønstret på tværs af elementet som striber eller et skakbræt.

background: repeating-linear-gradient(90deg, #3b82f6 0px, #3b82f6 20px, #ec4899 20px, #ec4899 40px);

Dette skaber lodrette striber: 20 pixels blå, derefter 20 pixels pink, gentaget. Med gentagne gradienter skal du bruge absolutte længder (ikke procenter) for mere kontrol.

Du kan bruge det til dekorative rammer, stripmønster, statusbjælker eller visuelle skillelinjer uden at have brug for en billedfil.

Radial gradientsyntaks opdelt

Radiale gradienter spreder sig udad fra et centralt punkt. Syntaksen adskiller sig fra lineære gradienter, fordi du styrer centrets position, form og størrelse i stedet for retning.

background: radial-gradient(shape size at position, color-stop-1, color-stop-2, ...);

Form: Cirkel eller ellipse

Formen bestemmer, om gradienten spreder sig som en cirkel eller en ellipse (oval).

  • circle — farver spreder sig udad lige meget i alle retninger
  • ellipse — farver spreder sig udad i en oval form, efter elementets bredde og højde
background: radial-gradient(circle, #3b82f6 0%, #ec4899 100%);

Dette er en cirkulær gradient centreret i elementet, med blå i midten og pink ved kanterne.

background: radial-gradient(ellipse, #3b82f6 0%, #ec4899 100%);

Dette er en oval gradient, der strækker sig for at matche elementets billedformat.

Hvis du ikke skriver en form, antager browseren ellipse.

Størrelsesnøgleord

Du kan kontrollere, hvor stor gradienten bliver. Disse nøgleord definerer radius:

  • closest-side — gradienten strækker sig til elementets nærmeste kant
  • farthest-side — gradienten strækker sig til elementets fjerneste kant
  • closest-corner — gradienten når til nærmeste hjørne
  • farthest-corner — gradienten når til fjerneste hjørne (standard)
background: radial-gradient(circle closest-side, #3b82f6 0%, #ec4899 100%);

Gradienten her stopper ved nærmeste kant, så den fylder ikke hele elementet.

background: radial-gradient(circle farthest-corner, #3b82f6 0%, #ec4899 100%);

Gradienten her strækker sig helt til fjerneste hjørne og fylder elementet fuldstændigt.

Position: Flytte centrum

Som standard sidder gradientens centrum ved 50% 50% (elementets centrum). Du kan flytte det med nøgleordet at.

background: radial-gradient(circle at 30% 70%, #3b82f6 0%, #ec4899 100%);

Dette flytter gradientens centrum til 30% fra venstre og 70% fra toppen. Det blå glød vises nu i området nederst til venstre.

Du kan bruge procenter eller absolutte længder:

background: radial-gradient(circle at 100px 200px, #3b82f6 0%, #ec4899 100%);

Dette placerer centret 100 pixels fra venstre og 200 pixels fra toppen.

Gentagne radiale gradienter

Ligesom lineære gradienter kan du skabe en gentaget radial gradient til ringe eller cirkulære mønstre.

background: repeating-radial-gradient(circle, #3b82f6 0px, #3b82f6 20px, #ec4899 20px, #ec4899 40px);

Dette skaber koncentriske ringe: 20 pixels blå, derefter 20 pixels pink, gentaget udad fra centret.

Avanceret syntaks: Farvevink

En farvevink er en position mellem to farvestop, der styrer, hvordan de blandes. Det er nyttigt, når midtpunktet mellem to farver ikke ser rigtigt ud.

background: linear-gradient(90deg, #3b82f6 0%, 30%, #ec4899 100%);

30% her er en farvevink. Det skifter, hvor blå og pink mødes. Uden vinklen ville de mødes ved 50%. Med den mødes de tættere på 30%, så blå dominerer mere.

Farvevinker er subtile, men kraftfulde til at finindstille gradienter uden at tilføje ekstra farvestop.

Kombinere gradienter med andre egenskaber

Gradienter fungerer bedst, når de kombineres med andre CSS-egenskaber. Her er nogle praktiske eksempler.

Gradienter med baggrundssstørrelse

Du kan lagdele flere gradienter eller kombinere en gradient med et baggrundsbillede ved at bruge background-image:

background-image: 
  linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(236, 72, 153, 0.8)),
  url('/image.jpg');
background-size: cover, cover;
background-position: center, center;

Gradienten sidder oven på billedet. rgba()-farverne indeholder transparens, så billedet skinner igennem.

Gradienter med overgange

Du kan animere en gradientændring ved hjælp af CSS-overgange. Gradienter reagerer på tilstandsændringer som hover:

.button {
  background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
  transition: background 0.3s ease;
}

.button:hover {
  background: linear-gradient(90deg, #2563eb 0%, #1d4ed8 100%);
}

Gradienten skifter problemfrit, når du holder musen over den, hvilket skaber en subtil men bemærkelsesværdig effekt.

Gradienter med kasseskygge

Kombiner en gradient med en kasseskygge for dybde:

.card {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

Gradienten giver farveblanden som base, og skyggen tilføjer dimension.

Almindelige syntaksfejl at undgå

Manglende gradientfunktion

Dette fungerer ikke:

background: 90deg, #3b82f6, #ec4899;

Du skal medtage funktionens navn:

background: linear-gradient(90deg, #3b82f6, #ec4899);

Forkert antagelse om vinkelretning

Mange mennesker forventer, at 0deg peger til højre (som et kompas eller matematisk vinkel), men i CSS peger det opad:

/* Dette er OPAD, ikke til højre */
background: linear-gradient(0deg, #3b82f6, #ec4899);

/* Dette er TIL HØJRE */
background: linear-gradient(90deg, #3b82f6, #ec4899);

Glemme at-nøgleordet til radial position

Denne syntaks er forkert:

background: radial-gradient(circle 30% 70%, #3b82f6, #ec4899);

Tilføj at:

background: radial-gradient(circle at 30% 70%, #3b82f6, #ec4899);

Bruge procenter i stedet for pixels i gentagne gradienter

Procenter fungerer ikke godt med gentagne gradienter:

/* Problematisk — gentagelsesmønstret er uklart */
background: repeating-linear-gradient(90deg, #3b82f6 0%, #3b82f6 50%, #ec4899 50%, #ec4899 100%);

/* Bedre — klart gentaget hvert 40 pixels */
background: repeating-linear-gradient(90deg, #3b82f6 0px, #3b82f6 20px, #ec4899 20px, #ec4899 40px);

Brug en gradientgenerator til at lære syntaksen

Hvis du ikke er helt komfortabel med at håndskrive gradienter endnu, lader en CSS-gradientgenerator dig bygge gradienter visuelt og se syntaksen, mens du går. Du kan vælge farver, justere vinkler og positioner, og kopiere den præcise kode. Med tiden lærer du syntaksen naturligt ved at læse den genererede kode, og du begynder at skrive gradienter fra bunden.

Generatoren er også nyttig til at teste syntaksideer. Hvis du skriver en gradientlinje, og den ikke fungerer, kan du indsætte den i generatoren og justere visuelt, indtil det ser rigtigt ud, og derefter læse hvad der ændrede sig.

Test din gradientersyntaks

Når du har skrevet en gradient, skal du teste den i forskellige browsere. De fleste moderne browsere understøtter lineære og radiale gradienter, men nogle ældre eller mindre almindelige browsere understøtter det måske ikke. Du kan tjekke browserunderstøttelse på caniuse.com.

For maksimal kompatibilitet bør du overveje at tilføje en fallback-farve:

background: #3b82f6; /* fallback */
background: linear-gradient(90deg, #3b82f6, #ec4899);

Hvis gradienten ikke gengives, falder browseren tilbage til den solide blå.

Du bør også teste din gradient i sammenhæng. Indsæt den i dit faktiske HTML og se den på siden, på mobil og under forskellige lysmiljøer. En gradient, der ser perfekt ud i en editor, kan føles anderledes på det faktiske websted.

Næste trin med gradienter

Nu hvor du forstår syntaksen, kan du læse gradienter fra andre projekter og ændre dem for at passe til dit design. Du kan justere vinkler, tilføje farvestop, ændre positioner og endda kombinere flere gradienter.

Start enkelt: tag en to-farve lineær gradient, skift vinklen, og se, hvordan det påvirker udseendet. Tilføj et tredje farvestop. Prøv en radial gradient med et offset center. Jo mere du eksperimenterer, desto hurtigere bliver syntaksen anden natur.

CSS-gradienters syntaks er ikke så skræmmende, som det ser ud. Når du først ved, at vinkler styrer retning, farvestop definerer farver og positioner, og at flytter en radial gradients centrum, kan du skrive enhver gradient, du har brug for. Øv dig med gradientgeneratoren, eksperimenter med variationer, og snart vil du skrive gradienter med sikkerhed uden at skulle slå syntaksen op hver gang.