# Abstrakte bakgrunner: former, flater og flyt

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

Abstrakte bakgrunner bærer stemning uten å fortelle en historie, og det er derfor de ligger bak så mange overskrifter, lysbilder og produktsider. Å velge riktig type abstraksjon er mesteparten av jobben.

## The short version

- En abstrakt bakgrunn er laget av farge, form og tekstur i stedet for en gjenkjennelig scene eller gjenstand.
- De fleste abstrakte bakgrunner faller i tre typer: geometriske (harde kanter og mønstre), flytende (myke overganger og strømmende flater) og teksturerte (korn, støy og materiale).
- Geometriske bakgrunner føles strukturerte og presise, flytende bakgrunner føles rolige eller levende, og teksturerte bakgrunner føles fysiske og håndlagde.
- Abstrakte bakgrunner trenger fortsatt et rolig område med jevn lyshet der teksten skal ligge.
- Mange geometriske og flytende bakgrunner kan lages i ren CSS med lineære, radiale, koniske og repeterende gradienter.

En **abstrakt bakgrunn** er laget av farge, form og tekstur i stedet for en gjenkjennelig scene. Nesten alle hører til én av tre familier: **geometriske** bakgrunner bygget av harde kanter, striper og mønstre, **flytende** bakgrunner bygget av myke overganger og strømmende flater, og **teksturerte** bakgrunner bygget av korn, støy og materiale. Velg familien som passer til følelsen du trenger, og hold et rolig område der ordene skal ligge.

Denne guiden går gjennom hver familie med levende eksempler og koder, når du bør bruke hvilken, og hvordan du hindrer at en abstrakt bakgrunn overdøver innholdet. Om gradienttypene som ligger under mange av dem, se [typer gradienter](https://gradiently.design/nb/guide/types-of-gradients).

## Tre typer abstrakte bakgrunner

| Type | Bygget av | Følelse | Passer til |
| --- | --- | --- | --- |
| Geometrisk | Harde stopp, striper, rutenett, sirkler, kileformer | Strukturert, presis, energisk | Teknologi, sport, arrangementer, redaksjonelle oppsett |
| Flytende | Myke gradienter, meshes, glød, strømmende bånd | Rolig, levende, eksklusiv | Merkevarer, produktsider, velvære, musikk |
| Teksturert | Korn, støy, papir, stoff, glass | Fysisk, håndlaget, varm | Håndverk, mat, trykk, mote, alt som er laget for hånd |

De tre familiene. Mange gode bakgrunner kombinerer to, for eksempel en flytende gradient med fint korn.

## Geometriske abstrakte bakgrunner

Geometriske bakgrunner bruker skarpe kanter: delinger, striper, ringer, kileformer og rutenett. De virker bevisste og strukturerte, og passer naturlig sammen med sterke typografiske oppsett som [sveitsisk stil](https://gradiently.design/nb/guide/swiss-design). I CSS er det harde fargestopp (to farger på samme posisjon) som skaper kantene.

- Diagonal deling: `linear-gradient(135deg, #0f172a 0% 50%, #f97316 50% 100%)`
- Tonale striper: `repeating-linear-gradient(45deg, #1e1b4b 0 18px, #312e81 18px 36px)`
- Firedelt farge: `conic-gradient(from 45deg, #f43f5e 0 25%, #f59e0b 0 50%, #10b981 0 75%, #3b82f6 0)`
- Solstråler: `repeating-conic-gradient(from 0deg at 50% 100%, #fde68a 0deg 6deg, #fb923c 6deg 12deg)`
- Konsentriske ringer: `repeating-radial-gradient(circle at 50% 50%, #0b132b 0 14px, #1c2541 14px 28px)`
- Tre bånd: `linear-gradient(90deg, #111827 0% 33.3%, #7c3aed 33.3% 66.6%, #f5f3ff 66.6% 100%)`

Seks geometriske bakgrunner, hver én CSS-gradient med harde stopp. Tonale varianter, som stripene og ringene, er rolige nok til tekst.

Trikset med geometriske bakgrunner er tonen. Striper eller ruter med høy kontrast vibrerer og gjør teksten oppå nesten uleselig. Hold mønsterfargene nær hverandre i lyshet, som de tonale stripene og ringene over, og spar høy kontrast til områder uten ord. [CSS-mønstre](https://gradiently.design/nb/guide/css-patterns) har mange flere.

## Flytende abstrakte bakgrunner

Flytende bakgrunner har ingen kanter i det hele tatt: fargen samler seg, driver og folder seg som lys på vann eller silke. De omfatter mesh-gradienter, nordlysglød og strømmende bånd. De føles roligere og mer eksklusive enn geometriske, og de er de enkleste abstrakte bakgrunnene å legge tekst på, fordi en myk flate har store, jevne områder.

- Flytende skumring: `radial-gradient(ellipse at 20% 30%, #ff7a59 0%, #c43d7a 40%, #2b1055 100%)`
- Nordlysbånd: `linear-gradient(170deg, #03121f 0%, #0b3b3a 40%, #2dd4bf 55%, #0b3b3a 70%, #03121f 100%)`
- Dypt vann: `radial-gradient(ellipse at 70% 70%, #a5f3fc 0%, #60a5fa 35%, #3730a3 75%, #1e1b4b 100%)`
- Pastellblomst: `radial-gradient(circle at 35% 40%, #fef3c7 0%, #fbcfe8 40%, #c4b5fd 80%, #a78bfa 100%)`

Flytende flater som enkeltgradienter. Ekte flytende bakgrunner legger flere av disse i lag, og slik bygges CSS-mesh-gradienter.

```css
.fluid {
  background-color: #2b1055;
  background-image:
    radial-gradient(40% 50% at 20% 30%, #ff7a59cc, transparent 70%),
    radial-gradient(45% 55% at 80% 25%, #c43d7acc, transparent 70%),
    radial-gradient(50% 60% at 60% 85%, #5b3cc4cc, transparent 70%);
}
```

En flytende bakgrunn av tre overlappende radiale glør på et mørkt underlag. Flytt `at`-posisjonene for å styre hvor lyset samler seg.

Flytende bakgrunner finnes i navngitte stiler: [mesh-gradienter](https://gradiently.design/nb/guide/mesh-gradients) blander flere fargepunkter utover en flate, og [nordlysgradienter](https://gradiently.design/nb/guide/aurora-gradients) lar lysende felt sveve over et mørkt underlag. Begge ser best ut med litt korn oppå.

## Teksturerte abstrakte bakgrunner

Tekstur gjør flat farge til en overflate du nesten kan ta på. Fint korn ser ut som film, grovere struktur som papir, myke fibre som stoff, en frostet uskarphet som glass. Teksturen kan være hele bakgrunnen, som en papirfarget flate, eller et lag over en gradient, og slik lages de fleste bakgrunner med eksklusiv følelse.

Et stående innlegg i journalstil med en overskrift på en mykt teksturert, varm bakgrunn

En teksturert flate for en håndverksmerkevare: overflaten setter tonen.

En stående lanseringskunngjøring med en overskrift på en jevn, kjølig flytende gradient

En flytende flate for en programvarelansering: rolig, lys og ren.

Hold teksturen subtil når tekst ligger oppå: nok til at den kjennes på armlengdes avstand, men ikke så mye at bokstavene ser skitne ut. [Bakgrunnstekstur](https://gradiently.design/nb/guide/background-texture) tar for seg korn, papir, stoff og glass i detalj, og [kornete gradienter](https://gradiently.design/nb/guide/grainy-gradients) forklarer hvorfor litt støy får farger til å se dyre ut.

## Slik lager du en abstrakt bakgrunn av merkevarefargene

De beste abstrakte bakgrunnene ser abstrakte ut, men tilhører noen. Å ta utgangspunkt i dine egne farger og former, i stedet for en ferdigpakke, er det som gjør at det skjer.

1. **Ta to eller tre merkevarefarger** Legg til en dypere tone fra samme familie for dybde. [Slik velger du merkevarefarger](https://gradiently.design/nb/guide/how-to-choose-brand-colors) hjelper deg hvis du ikke har dem ennå.
2. **Velg en familie** Geometrisk hvis merkevaren din er presis eller energisk, flytende hvis den er rolig eller eksklusiv, teksturert hvis den er håndlaget eller varm.
3. **Lån en form fra merkevaren** En kurve fra logoen, vinkelen på en bokstav, en sirkel fra et ikon. Når du gjentar den i bakgrunnen, knyttes de to sammen.
4. **Planlegg den stille sonen** Bestem hvor teksten skal ligge i hvert format, og hold området jevnt i lyshet.
5. **Legg til tekstur sist** Et lett korn over alt, og sjekk det så i mobilstørrelse med ekte ord oppå.

## Velg en abstrakt bakgrunn etter oppgaven

### Unngå

- Mønstre med høy kontrast bak brødtekst
- Tre typer abstraksjon i ett design
- Tilfeldige former uten forbindelse til merkevaren
- En bakgrunn så travel at den blir budskapet

### Gjør

- Tonale mønstre, eller hold mønstre unna ordene
- Én type, med tekstur som et støttende lag
- Former og farger som ekkoer merkevaren din
- En bakgrunn som setter stemningen og deretter trer tilbake

Tilpass abstraksjonen til innholdet. Et datatungt lysbilde vil ha en stille flytende eller tonal flate. Et lanseringsinnlegg tåler en dristig geometrisk deling. En meny eller et håndverksprodukt vil ha tekstur. Og uansett hva du velger, test det i riktig størrelse med de riktige ordene oppå, for abstrakte bakgrunner som ser vakre ut tomme, kjemper ofte mot teksten når den kommer.

Marks fra Gradiently er flytende og teksturerte abstraksjoner i ett: farger, opptil tre lagdelte materialer, lys, korn og bevegelse, gjengitt levende bak designet ditt, med det roligste området flyttet bak ordene. Du kan bla i dem i Markedet eller lage en i Forge.

## FAQ

### Hva er en abstrakt bakgrunn?

En bakgrunn laget av farge, form og tekstur i stedet for en gjenkjennelig scene. De fleste er geometriske, flytende eller teksturerte, eller en kombinasjon.

### Hvordan lager jeg en abstrakt bakgrunn i CSS?

Bruk lineære, koniske og repeterende gradienter med harde stopp til geometriske mønstre, og radiale gradienter i lag til flytende flater. Legg til et SVG-støylag for tekstur.

### Hvilken abstrakt bakgrunn er best til tekst?

Flytende bakgrunner med store, jevne områder er enklest, etterfulgt av tonale geometriske mønstre. Unngå mønstre med høy kontrast bak ord.

### Hva får en abstrakt bakgrunn til å se eksklusiv ut?

Måtehold: en begrenset palett, mykt lys, fin tekstur og et rolig område der innholdet ligger. Travel abstraksjon med høy kontrast ser som regel billigere ut.