# Abstrakte baggrunde: former, flader og flow

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

Abstrakte baggrunde bærer stemning uden at fortælle en historie, og derfor ligger de bag så mange overskrifter, slides og produktsider. Det meste af arbejdet er at vælge den rette slags abstraktion.

## The short version

- En abstrakt baggrund er en baggrund lavet af farve, form og tekstur frem for et genkendeligt motiv eller en genstand.
- De fleste abstrakte baggrunde falder i tre slags: geometriske (hårde kanter og mønstre), flydende (bløde overgange og strømmende flader) og teksturerede (korn, støj og materiale).
- Geometriske baggrunde virker strukturerede og præcise, flydende baggrunde virker rolige eller levende, og teksturerede baggrunde virker fysiske og håndlavede.
- Abstrakte baggrunde har stadig brug for et roligt område med jævn lysstyrke, hvor teksten skal ligge.
- Mange geometriske og flydende baggrunde kan bygges i ren CSS med lineære, radiale, koniske og gentagne gradienter.

En **abstrakt baggrund** er lavet af farve, form og tekstur frem for et genkendeligt motiv. Næsten alle hører til en af tre familier: **geometriske** baggrunde bygget af hårde kanter, striber og mønstre, **flydende** baggrunde bygget af bløde overgange og strømmende flader, og **teksturerede** baggrunde bygget af korn, støj og materiale. Vælg den familie, der passer til den følelse, du har brug for, og hold et roligt område frit dér, hvor ordene skal stå.

Denne guide gennemgår hver familie med levende eksempler og koder, hvornår du bruger hvilken, og hvordan du forhindrer en abstrakt baggrund i at overdøve indholdet. Om de gradienttyper, der ligger under mange af dem, kan du læse i [typer af gradienter](https://gradiently.design/da/guide/types-of-gradients).

## Tre slags abstrakte baggrunde

| Slags | Bygget af | Virker | Passer til |
| --- | --- | --- | --- |
| Geometrisk | Hårde stop, striber, gitre, cirkler, kiler | Struktureret, præcis, energisk | Tech, sport, events, redaktionelle layouts |
| Flydende | Bløde gradienter, meshes, glød, strømmende bånd | Rolig, levende, eksklusiv | Brands, produktsider, wellness, musik |
| Tekstureret | Korn, støj, papir, stof, glas | Fysisk, håndlavet, varm | Håndværk, mad, tryk, mode, alt det håndlavede |

De tre familier. Mange gode baggrunde kombinerer to, for eksempel en flydende gradient med fint korn.

## Geometriske abstrakte baggrunde

Geometriske baggrunde bruger skarpe kanter: delinger, striber, ringe, kiler og gitre. De virker bevidste og strukturerede og passer naturligt sammen med kraftige typografiske layouts som den [schweiziske stil](https://gradiently.design/da/guide/swiss-design). I CSS skaber hårde farvestop (to farver på samme position) kanterne.

- Diagonal deling: `linear-gradient(135deg, #0f172a 0% 50%, #f97316 50% 100%)`
- Tonale striber: `repeating-linear-gradient(45deg, #1e1b4b 0 18px, #312e81 18px 36px)`
- Farve i kvarte: `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)`
- Koncentriske ringe: `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 baggrunde, hver en enkelt CSS-gradient med hårde stop. Tonale udgaver som striberne og ringene er rolige nok til tekst.

Tricket med geometriske baggrunde er tonen. Striber eller ruder med høj kontrast vibrerer og gør tekst ovenpå næsten umulig at læse. Hold mønsterfarverne tæt på hinanden i lysstyrke, som de tonale striber og ringe ovenfor, og gem den høje kontrast til områder uden ord. [CSS-mønstre](https://gradiently.design/da/guide/css-patterns) har mange flere.

## Flydende abstrakte baggrunde

Flydende baggrunde har slet ingen kanter: farven samler sig, driver og folder sig som lys på vand eller silke. Det omfatter mesh-gradienter, nordlysglød og strømmende bånd. De virker roligere og mere eksklusive end geometriske baggrunde, og de er de nemmeste abstrakte baggrunde at lægge tekst på, fordi en blød flade har store, jævne områder.

- Flydende tusmørke: `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%)`
- Dybt vand: `radial-gradient(ellipse at 70% 70%, #a5f3fc 0%, #60a5fa 35%, #3730a3 75%, #1e1b4b 100%)`
- Pastelblomst: `radial-gradient(circle at 35% 40%, #fef3c7 0%, #fbcfe8 40%, #c4b5fd 80%, #a78bfa 100%)`

Flydende flader som enkelte gradienter. Rigtige flydende baggrunde lægger flere af dem i lag, og det er sådan, CSS-mesh-gradienter bygges.

```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 flydende baggrund af tre overlappende radiale glød på en dyb bund. Flyt `at`-positionerne for at styre, hvor lyset samler sig.

Flydende baggrunde findes i navngivne stilarter: [mesh-gradienter](https://gradiently.design/da/guide/mesh-gradients) blander flere farvepunkter hen over en flade, og [aurora-gradienter](https://gradiently.design/da/guide/aurora-gradients) lader lysende pletter svæve på en mørk bund. Begge ser bedst ud med lidt korn ovenpå.

## Teksturerede abstrakte baggrunde

Tekstur gør flad farve til en overflade, du næsten kan mærke. Fint korn læses som film, en grovere struktur som papir, bløde fibre som stof og en mat sløring som glas. Teksturen kan være hele baggrunden, som en papirfarvet flade, eller et lag over en gradient, og sådan laves de fleste baggrunde, der ser eksklusive ud.

Et opslag i højformat i journalstil med en overskrift på en blødt tekstureret varm baggrund

En tekstureret flade til et håndværksbrand: selve overfladen sætter tonen.

Et opslag i højformat, der annoncerer en udgivelse, med en overskrift på en glat, kølig flydende gradient

En flydende flade til en softwareudgivelse: rolig, lys og ren.

Hold teksturen diskret, når der ligger tekst ovenpå: nok til at mærkes på nært hold, men ikke så meget, at bogstaverne ser snavsede ud. [Baggrundstekstur](https://gradiently.design/da/guide/background-texture) gennemgår korn, papir, stof og glas i detaljer, og [kornede gradienter](https://gradiently.design/da/guide/grainy-gradients) forklarer, hvorfor lidt støj får farver til at se dyre ud.

## Sådan laver du en abstrakt baggrund af dine brandfarver

De bedste abstrakte baggrunde ser abstrakte ud, men tilhører nogen. Det sker, når du tager udgangspunkt i dine egne farver og former frem for en stockpakke.

1. **Tag to eller tre brandfarver** Tilføj en dybere tone fra samme familie for dybde. [Sådan vælger du brandfarver](https://gradiently.design/da/guide/how-to-choose-brand-colors) hjælper, hvis du ikke har dem endnu.
2. **Vælg en familie** Geometrisk, hvis dit brand er præcist eller energisk, flydende, hvis det er roligt eller eksklusivt, og tekstureret, hvis det er håndlavet eller varmt.
3. **Lån en form fra brandet** En kurve fra logoet, vinklen på et bogstav, en cirkel fra et ikon. Når du gentager den i baggrunden, binder det de to sammen.
4. **Planlæg den stille zone** Beslut, hvor teksten skal stå i hvert format, og hold området jævnt i lysstyrke.
5. **Tilføj tekstur til sidst** Et let korn over det hele, og tjek det så i telefonstørrelse med rigtige ord ovenpå.

## Sådan vælger du en abstrakt baggrund til opgaven

### Undgå

- Mønstre med høj kontrast bag brødtekst
- Tre slags abstraktion i ét design
- Tilfældige former uden forbindelse til brandet
- En baggrund så travl, at den bliver budskabet

### Gør

- Tonale mønstre, eller hold mønstre væk fra ord
- Én slags, med tekstur som støttende lag
- Former og farver, der ekkoer dit brand
- En baggrund, der sætter stemningen og derefter træder i baggrunden

Afstem abstraktionen efter indholdet. Et slide fyldt med data kræver en stille flydende eller tonal flade. Et lanceringsopslag kan tåle en dristig geometrisk deling. En menu eller et håndværksprodukt vil have tekstur. Og uanset hvad du vælger, så test det i den rigtige størrelse med de rigtige ord ovenpå, for abstrakte baggrunde, der er smukke tomme, kæmper ofte mod teksten, når den kommer.

Marks fra Gradiently er flydende og teksturerede abstraktioner i ét: farver, op til tre stablede materialer, lys, korn og bevægelse, tegnet live bag dit design med deres roligste område flyttet om bag ordene. Du kan finde dem på Markedet eller lave en i Forge.

## FAQ

### Hvad er en abstrakt baggrund?

En baggrund lavet af farve, form og tekstur frem for et genkendeligt motiv. De fleste er geometriske, flydende eller teksturerede, eller en kombination.

### Hvordan laver jeg en abstrakt baggrund i CSS?

Brug lineære, koniske og gentagne gradienter med hårde stop til geometriske mønstre og radiale gradienter i lag til flydende flader. Tilføj et SVG-støjlag for tekstur.

### Hvilken abstrakt baggrund er bedst til tekst?

Flydende baggrunde med store, jævne områder er nemmest, efterfulgt af tonale geometriske mønstre. Undgå mønstre med høj kontrast bag ord.

### Hvad får en abstrakt baggrund til at se eksklusiv ud?

Tilbageholdenhed: en begrænset palet, blødt lys, fin tekstur og et roligt område, hvor indholdet står. Travl abstraktion med høj kontrast ser som regel billigere ud.