# Slik lager du en gradientbakgrunn som ikke ser generisk ut

[Canonical HTML page](https://gradiently.design/nb/guide/gradient-background)

De fleste gradientbakgrunner ligner hverandre fordi de starter fra de samme få forhåndsinnstillingene. Her er en metode i fem steg for å lage en som ser gjennomtenkt ut, med koder du kan kopiere.

## The short version

- En god gradientbakgrunn starter med en bunnfarge, en liten familie på tre til fem beslektede farger, et materiale eller en tekstur, og en planlagt plass til ord.
- De fleste gradientbakgrunner ser generiske ut fordi de er tofargede forhåndsinnstillinger i de samme populære fargetonene, blandet i en rett diagonal.
- En mørk eller lys bunn avgjør stemningen mer enn noen enkeltfarge gjør, så velg den først.
- Litt korn skjuler banding og får en digital gradient til å føles som en overflate i stedet for en skjermstandard.
- Tegn bakgrunnen for hvert format i stedet for å beskjære ett bilde, så det lyseste området alltid havner der designet trenger det.

For å lage en **gradientbakgrunn** som ikke ser generisk ut, velger du først en bunnfarge, legger til tre til fem beslektede farger i stedet for to, gir overflaten et materiale som korn eller mykt lys, og beholder et rolig område der ordene skal stå. De fleste gradientbakgrunner hopper over hvert eneste av de stegene: de tar en tofarget forhåndsinnstilling, kjører den fra hjørne til hjørne og stopper der. Det er derfor så mange av dem kan byttes ut med hverandre.

## Hvorfor de fleste gradientbakgrunner ser like ut

Designverktøy, generatorer og maler tilbyr alle den samme korte listen med overganger, og trender dytter alle mot de samme fargetonene i samme øyeblikk. Fiolett til rosa, blått til cyan og oransje til magenta er behagelige, men de brukes så mye at de leses som en standard og ikke som et valg. Det større mønsteret forklares i [hvorfor alle feeder ser like ut](https://gradiently.design/nb/guide/why-every-feed-looks-the-same).

### Generisk

- To mettede farger fra en forhåndsinnstilling
- En rett diagonal på 45 grader
- Helt ren, digital overflate
- Fargen jevnt fordelt, ingen plass til ord
- Ett bilde strukket til alle størrelser

### Gjennomtenkt

- En bunn pluss en familie på tre til fem farger
- Lys som kommer fra et sted
- Korn, papir eller glans på overflaten
- En rolig sone planlagt for overskriften
- Tegnet på nytt for hvert format

## Steg 1: velg en bunn

Bunnen er fargen gradienten ligger på og vender tilbake til. Den setter stemningen mer enn noen aksent. En nesten svart bunn får farger til å gløde og føles eksklusiv og nattlig; en varm, off-white bunn føles trykt, rolig og redaksjonell. Velg én før du velger en eneste aksent, og behold den gjennom hele settet med design.

- Mørk bunn, fiolett lys: `radial-gradient(circle at 75% 20%, #7c3aed 0%, #2e1065 35%, #0c0a1d 75%)`
- Papirbunn, ferskenlys: `radial-gradient(circle at 25% 25%, #fed7aa 0%, #fdf2e9 45%, #f7f1ea 80%)`
- Dypgrønn bunn, blågrønt lys: `radial-gradient(circle at 70% 80%, #0d9488 0%, #134e4a 40%, #071a1a 80%)`

Tre bunner med én opplyst farge hver. Bunnen gjør mesteparten av jobben; aksenten trenger bare å gløde.

Velger du mørkt, bør du lese [mørke gradientbakgrunner](https://gradiently.design/nb/guide/dark-gradient-backgrounds) før du eksporterer, for det er i mørke overganger banding vises mest.

## Steg 2: velg tre til fem beslektede farger

To farger er den enkleste gradienten å lage og den enkleste å kopiere. En liten familie gir dybde: en skyggetone, en hovedtone, et løft og én aksent som brukes sparsomt. Hold naboene tett på fargesirkelen så overgangene blir rene, og la aksenten stå for seg selv. Motsatte farger side om side blir grå der de møtes, noe som dekkes i [grumsete gradienter](https://gradiently.design/nb/guide/muddy-gradients).

- Blekkbunn: #0f0b1e
- Indigoskygge: #312e81
- Fiolett hovedtone: #6d28d9
- Lilla løft: #c084fc
- Glødaksent: #fb923c

En bunn, tre beslektede fioletter og én varm aksent. Gløden dukker bare opp på ett lite sted, og det er nettopp derfor den blir lagt merke til.

## Steg 3: gi den et materiale

En ren digital overgang ser ut som en skjermstandard. Et materiale får den til å se ut som en overflate. Korn leses som film eller trykk, papirstruktur leses som håndverk, en glassaktig glans leses som teknologi og myk silke leses som luksus. Du trenger ikke mye: et støylag med lav opasitet er nok til å endre følelsen. [Gradienttekstur](https://gradiently.design/nb/guide/gradient-texture) sammenligner familiene, og [kornete gradienter](https://gradiently.design/nb/guide/grainy-gradients) har koden.

## Steg 4: planlegg hvor ordene skal stå

En bakgrunn finnes for å bære noe: en overskrift, en pris, en dato. Bestem hvor de ordene skal stå før du gjør ferdig gradienten, og hold det området roligere og med høyere kontrast. Legg den lyseste, travleste fargen unna teksten, som regel i et hjørne, og la bunnen vises bak ordene. Reglene for kontrast finner du i [fargekontrast og tilgjengelighet](https://gradiently.design/nb/guide/color-contrast-accessibility).

Et arrangementsinnlegg der overskriften står på det lyseste området av gradienten og er vanskelig å lese

Når fargen er jevnt fordelt, kan den lyseste delen havne rett bak ordene.

Det samme arrangementsinnlegget med et roligere, mørkere område av gradienten bak overskriften

Med en rolig sone bak teksten bærer den samme bakgrunnen budskapet.

## Steg 5: tegn den for hvert format

En gradient som ser riktig ut som et kvadratisk innlegg, kan se feil ut som en stående historie, fordi beskjæring flytter det lyse området. Behandle bakgrunnen som en oppskrift du tegner i hver størrelse, der du justerer hvor lyset lander, i stedet for ett bilde du beskjærer.

- Innlegg 1080×1350: 1080 × 1350
- Historie 1080×1920: 1080 × 1920
- Nettsted-hero 1920×1080: 1920 × 1080
- Bloggbanner 1200×600: 1200 × 600

Fire vanlige bakgrunnsstørrelser. Lyset bør lande på et fornuftig sted i hver av dem, ikke der en beskjæring tilfeldigvis etterlater det.

## En gradientbakgrunn i CSS

På nettet har en gradient over hele siden én klassisk feil: hvis siden er kort, gjentas bakgrunnen i bånd. Gi rotelementet en minstehøyde, sett en ensfarget reservefarge som også vises ved overrulling, og legg så gradienten oppå.

```css
html {
  min-height: 100%;
  background-color: #0f0b1e; /* fallback, and the colour seen on overscroll */
}

body {
  min-height: 100vh;
  margin: 0;
  background-image:
    radial-gradient(circle at 80% 15%, #6d28d9 0%, transparent 45%),
    radial-gradient(circle at 10% 90%, #312e81 0%, transparent 50%),
    linear-gradient(160deg, #0f0b1e 0%, #1e1640 100%);
}
```

En mørk bunn, et fiolett lys øverst til høyre og en indigoskygge nederst til venstre. Legg et kornlag øverst for å fullføre den.

For en hero-seksjon i stedet for en hel side fungerer de samme lagene på selve seksjonen. [Hero-bakgrunner for nettsteder](https://gradiently.design/nb/guide/website-hero-background) går gjennom størrelser og ytelse.

## Å eie gradientbakgrunnen din

Selv en omhyggelig laget bakgrunn kan plukkes opp og brukes av andre. I Gradiently er en ferdig bakgrunn en Mark: en oppskrift på farger, materialer, lys, korn og bevegelse med nøyaktig én eier om gangen. Den tegnes i hver størrelse du designer i, og gjør plass til ordene dine av seg selv. Du kan designe med hvilken som helst Mark gratis, og sikre deg en for å gjøre den til din.

## FAQ

### Hvordan får jeg en gradientbakgrunn til å se mindre generisk ut?

Start med en bunnfarge, bruk tre til fem beslektede farger i stedet for to, legg til korn eller et annet materiale, og planlegg et rolig område til ord.

### Hvilke farger gir en god gradientbakgrunn?

Farger som ligger nær hverandre på fargesirkelen, blander seg rent. Legg til én kontrasterende aksent på et lite område for å skape interesse.

### Hvorfor gjentas gradientbakgrunnen min i CSS som striper nedover siden?

Rotelementet er kortere enn vinduet, så gradienten flislegges. Sett `min-height: 100%` på `html` og `min-height: 100vh` på `body`.

### Bør en gradientbakgrunn være mørk eller lys?

Begge deler fungerer. Mørke bunner får farger til å gløde og føles eksklusive; lyse bunner føles trykte og rolige. Velg én og vær konsekvent.

### Hvordan stopper jeg banding i en gradientbakgrunn?

Legg til et lett kornlag og unngå kraftig JPEG-komprimering. Mørke og diskrete gradienter får mest banding.