# Abstrakta bakgrunder: former, fält och flöde

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

Abstrakta bakgrunder ger stämning utan att berätta en historia, och därför ligger de bakom så många rubriker, bildspel och produktsidor. Att välja rätt sorts abstraktion är det mesta av jobbet.

## The short version

- En abstrakt bakgrund består av färg, form och textur i stället för en igenkännbar miljö eller ett föremål.
- De flesta abstrakta bakgrunder tillhör tre typer: geometriska (skarpa kanter och mönster), flytande (mjuka övergångar och böljande ytor) och texturerade (korn, brus och material).
- Geometriska bakgrunder känns strukturerade och precisa, flytande bakgrunder känns lugna eller levande, och texturerade bakgrunder känns fysiska och hantverksmässiga.
- Abstrakta bakgrunder behöver ändå ett lugnt område med jämn ljushet där text ska ligga.
- Många geometriska och flytande bakgrunder går att bygga i ren CSS med linjära, radiella, koniska och upprepade gradienter.

En **abstrakt bakgrund** består av färg, form och textur i stället för en igenkännbar scen. Nästan alla hör till en av tre familjer: **geometriska** bakgrunder byggda av skarpa kanter, ränder och mönster, **flytande** bakgrunder byggda av mjuka övergångar och böljande ytor, och **texturerade** bakgrunder byggda av korn, brus och material. Välj den familj som passar känslan du vill ha, och behåll sedan ett lugnt område där orden ska stå.

Den här guiden går igenom varje familj med levande exempel och koder, när du använder vilken och hur du hindrar en abstrakt bakgrund från att köra över innehållet. För gradienttyperna som många av dem bygger på, se [typer av gradienter](https://gradiently.design/sv/guide/types-of-gradients).

## Tre sorters abstrakta bakgrunder

| Typ | Byggd av | Känns | Passar |
| --- | --- | --- | --- |
| Geometrisk | Hårda färgstopp, ränder, rutnät, cirklar, kilar | Strukturerad, precis, energisk | Teknik, sport, event, redaktionella layouter |
| Flytande | Mjuka gradienter, meshar, sken, böljande band | Lugn, levande, exklusiv | Varumärken, produktsidor, hälsa, musik |
| Texturerad | Korn, brus, papper, tyg, glas | Fysisk, hantverksmässig, varm | Hantverk, mat, tryck, mode, allt handgjort |

De tre familjerna. Många bra bakgrunder kombinerar två, till exempel en flytande gradient med fint korn.

## Geometriska abstrakta bakgrunder

Geometriska bakgrunder använder skarpa kanter: delningar, ränder, ringar, kilar och rutnät. De känns avsiktliga och strukturerade och passar naturligt ihop med kraftfulla typografiska layouter som den [schweiziska stilen](https://gradiently.design/sv/guide/swiss-design). I CSS skapas kanterna med hårda färgstopp, alltså två färger på samma position.

- Diagonal delning: `linear-gradient(135deg, #0f172a 0% 50%, #f97316 50% 100%)`
- Tonala ränder: `repeating-linear-gradient(45deg, #1e1b4b 0 18px, #312e81 18px 36px)`
- Färg i kvadranter: `conic-gradient(from 45deg, #f43f5e 0 25%, #f59e0b 0 50%, #10b981 0 75%, #3b82f6 0)`
- Solstrålar: `repeating-conic-gradient(from 0deg at 50% 100%, #fde68a 0deg 6deg, #fb923c 6deg 12deg)`
- Koncentriska ringar: `repeating-radial-gradient(circle at 50% 50%, #0b132b 0 14px, #1c2541 14px 28px)`
- Tre band: `linear-gradient(90deg, #111827 0% 33.3%, #7c3aed 33.3% 66.6%, #f5f3ff 66.6% 100%)`

Sex geometriska bakgrunder, var och en en enda CSS-gradient med hårda stopp. Tonala versioner, som ränderna och ringarna, är lugna nog för text.

Knepet med geometriska bakgrunder är tonen. Ränder eller rutor med hög kontrast vibrerar och gör text ovanpå nästan omöjlig att läsa. Håll mönsterfärgerna nära varandra i ljushet, som de tonala ränderna och ringarna ovan, och spara hög kontrast till ytor utan ord. [CSS-mönster](https://gradiently.design/sv/guide/css-patterns) har många fler.

## Flytande abstrakta bakgrunder

Flytande bakgrunder har inga kanter alls: färg samlas, driver och veckar sig som ljus på vatten eller siden. Hit hör mesh-gradienter, norrskenssken och böljande band. De känns lugnare och mer exklusiva än geometriska, och de är de lättaste abstrakta bakgrunderna att lägga text på, eftersom en mjuk yta har stora jämna områden.

- Flytande skymning: `radial-gradient(ellipse at 20% 30%, #ff7a59 0%, #c43d7a 40%, #2b1055 100%)`
- Norrskensband: `linear-gradient(170deg, #03121f 0%, #0b3b3a 40%, #2dd4bf 55%, #0b3b3a 70%, #03121f 100%)`
- Djupt vatten: `radial-gradient(ellipse at 70% 70%, #a5f3fc 0%, #60a5fa 35%, #3730a3 75%, #1e1b4b 100%)`
- Pastellblom: `radial-gradient(circle at 35% 40%, #fef3c7 0%, #fbcfe8 40%, #c4b5fd 80%, #a78bfa 100%)`

Flytande ytor som enkla gradienter. Riktiga flytande bakgrunder lägger flera av dessa i lager, och så byggs 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 flytande bakgrund av tre överlappande radiella sken på ett mörkt underlag. Flytta `at`-positionerna för att styra var ljuset samlas.

Flytande bakgrunder finns i namngivna stilar: [mesh-gradienter](https://gradiently.design/sv/guide/mesh-gradients) blandar flera färgpunkter över en yta, och [aurora-gradienter](https://gradiently.design/sv/guide/aurora-gradients) låter lysande fläckar sväva på ett mörkt underlag. Båda ser bäst ut med lite korn ovanpå.

## Texturerade abstrakta bakgrunder

Textur förvandlar platt färg till en yta du nästan kan ta på. Fint korn ser ut som film, en grövre struktur som papper, mjuka fibrer som tyg, en frostad oskärpa som glas. Texturen kan vara hela bakgrunden, som en pappersfärgad yta, eller ett lager över en gradient, och så görs de flesta exklusivt utseende gradientbakgrunder.

Ett inlägg i stående format i tidskriftsstil med en rubrik på en mjukt texturerad varm bakgrund

En texturerad yta för ett hantverksvarumärke: ytan själv sätter tonen.

Ett lanseringsinlägg i stående format med en rubrik på en len, sval flytande gradient

En flytande yta för en programvarulansering: lugn, ljus och ren.

Håll texturen diskret när text ligger ovanpå: så mycket att den märks på armlängds avstånd, men inte så mycket att bokstäverna ser smutsiga ut. [Bakgrundstextur](https://gradiently.design/sv/guide/background-texture) går igenom korn, papper, tyg och glas i detalj, och [korniga gradienter](https://gradiently.design/sv/guide/grainy-gradients) förklarar varför lite brus får färg att se dyr ut.

## Så gör du en abstrakt bakgrund av varumärkets färger

De bästa abstrakta bakgrunderna ser abstrakta ut men tillhör någon. Att utgå från dina egna färger och former, i stället för ett färdigt bildpaket, är det som gör att det blir så.

1. **Ta två eller tre varumärkesfärger** Lägg till en djupare ton ur samma familj för djupets skull. [Så väljer du varumärkesfärger](https://gradiently.design/sv/guide/how-to-choose-brand-colors) hjälper dig om du inte har några än.
2. **Välj en familj** Geometrisk om ditt varumärke är precist eller energiskt, flytande om det är lugnt eller exklusivt, texturerad om det är hantverksmässigt eller varmt.
3. **Låna en form från varumärket** En kurva från logotypen, vinkeln på en bokstav, en cirkel från en ikon. När du upprepar den i bakgrunden binds de två ihop.
4. **Planera den tysta zonen** Bestäm var texten ska ligga i varje format och håll det området jämnt i ljushet.
5. **Lägg till textur sist** Ett lätt korn över allt, och kontrollera sedan i mobilstorlek med riktiga ord ovanpå.

## Välj abstrakt bakgrund efter uppgiften

### Undvik

- Mönster med hög kontrast bakom brödtext
- Tre sorters abstraktion i samma design
- Slumpmässiga former utan koppling till varumärket
- En bakgrund så rörig att den blir budskapet

### Gör så

- Tonala mönster, eller håll mönster borta från orden
- En sort, med textur som stödjande lager
- Former och färger som ekar ditt varumärke
- En bakgrund som sätter stämningen och sedan drar sig tillbaka

Anpassa abstraktionen efter innehållet. En datatung bild vill ha en stilla flytande eller tonal yta. Ett lanseringsinlägg tål en djärv geometrisk delning. En meny eller en hantverksprodukt vill ha textur. Och vad du än väljer: testa i verklig storlek med de riktiga orden på, för abstrakta bakgrunder som ser vackra ut tomma konkurrerar ofta med texten när den väl kommer dit.

Marks i Gradiently är flytande och texturerade abstraktioner i ett: färger, upp till tre staplade material, ljus, korn och rörelse, renderade live bakom din design med det lugnaste området flyttat bakom orden. Du kan bläddra bland dem på Marknaden eller skapa en egen i Forge.

## FAQ

### Vad är en abstrakt bakgrund?

En bakgrund av färg, form och textur i stället för en igenkännbar scen. De flesta är geometriska, flytande eller texturerade, eller en blandning.

### Hur gör jag en abstrakt bakgrund i CSS?

Använd linjära, koniska och upprepade gradienter med hårda stopp för geometriska mönster, och radiella gradienter i lager för flytande ytor. Lägg till ett SVG-brusslager för textur.

### Vilken abstrakt bakgrund är bäst för text?

Flytande bakgrunder med stora, jämna områden är lättast, följda av tonala geometriska mönster. Undvik mönster med hög kontrast bakom ord.

### Vad får en abstrakt bakgrund att se exklusiv ut?

Återhållsamhet: en begränsad palett, mjukt ljus, fin textur och ett lugnt område där innehållet ligger. Rörig abstraktion med hög kontrast ser oftast billigare ut.