# Brusgradienter: len färg med korniga ytor

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

Brusgradienter är lätta att beskriva och knepiga att få rätt. Här är fem testade recept, vart och ett med färger, brusinställningar och skälet till att de fungerar, plus vad varje reglage i en generator faktiskt gör.

## The short version

- En brusgradient är en len färgblandning med ett lager fint slumpmässigt brus ovanpå, vilket ger den en tryckt, taktil yta och döljer bandning.
- De två inställningarna som betyder mest är brusfrekvens, som styr kornstorleken, och opacitet, som styr hur starkt det ser ut.
- Fraktalt brus med en frekvens mellan 0,6 och 0,9, blandat i Överlägg eller Mjukt ljus med 8 till 20 procents opacitet, passar de flesta skärmbakgrunder.
- Mörka brusgradienter behöver mindre brus än ljusa, eftersom korn syns mest i skuggor och mellantoner.
- I CSS kan brus ritas av ett inbäddat SVG-filter med `feTurbulence`, så det förblir skarpt i alla storlekar och inte kräver någon bildfil.

En **brusgradient** är en len färgblandning med ett fint lager slumpmässigt brus lagt över, så att färgen känns tryckt snarare än renderad. Blandningen ger dig färgen och ljusets riktning, bruset ger dig en yta och hindrar blandningen från att brytas upp i band. Nedan finns fem recept du kan kopiera, och sedan en enkel förklaring av varje generatorinställning så att du kan göra dina egna.

## Fem recept för brusgradienter

Varje recept är en basgradient och en brusinställning. Gradienterna visas här utan brus så att du ser färgen, och tabellen nedan anger bruset som läggs ovanpå. De är avsiktligt olika varandra: en mörk, en ljus, en varm, en kall och en djärv.

- 1. Nattviolett: `radial-gradient(circle at 70% 25%, #8b5cf6 0%, #3b1a78 40%, #0e0820 80%)`
- 2. Persikopapper: `radial-gradient(circle at 25% 20%, #ffd9b8 0%, #f6c6c0 40%, #f3ece6 85%)`
- 3. Solnedgångsaffisch: `linear-gradient(160deg, #ff7a3d 0%, #e5486f 50%, #5b2a86 100%)`
- 4. Djup lagun: `radial-gradient(ellipse at 30% 90%, #34d399 0%, #0f766e 40%, #06232a 85%)`
- 5. Klarblå: `linear-gradient(135deg, #1e3a8a 0%, #2563eb 45%, #93c5fd 100%)`

De fem grundblandningarna, före bruset. Klicka på någon för att kopiera dess CSS.

| Recept | Frekvens | Blandning | Opacitet | Varför |
| --- | --- | --- | --- | --- |
| 1. Nattviolett | 0,85, 3 oktaver | Överlägg | 8 % | Mörka toner visar korn lätt, så håll det lätt |
| 2. Persikopapper | 0,65, 4 oktaver | Multiplicera | 10 % | Multiplicera mörkar bara, så den ljusa bakgrunden förblir mjuk |
| 3. Solnedgångsaffisch | 0,6, 3 oktaver | Överlägg | 20 % | Kraftig färg tål grövre, tyngre korn som ett screentryck |
| 4. Djup lagun | 0,9, 2 oktaver | Mjukt ljus | 12 % | Fint korn håller en kall blandning ren |
| 5. Klarblå | 0,75, 3 oktaver | Mjukt ljus | 14 % | Blått till blekblått får dålig bandning, bruset mjukar upp den |

Brusinställningar för varje recept, med fraktalt brus i enfärgat läge. Frekvens och oktaver motsvarar direkt SVG-filtret i koden nedan.

## Inställningarna i en brusgradientgenerator förklarade

Varje [gradientgenerator](https://gradiently.design/sv/guide/gradient-generator) med brusalternativ, och varje SVG-brusfilter, använder någon version av samma reglage. När du vet vad var och ett gör kan du läsa vilket recept som helst och rätta till vilket resultat som helst.

| Inställning | Vad den ändrar | Bra utgångspunkt |
| --- | --- | --- |
| **Frekvens** (skala, storlek) | Kornstorleken. Högre är finare, lägre är grövre. | 0,6 till 0,9 för skärmar |
| **Oktaver** (detalj) | Lager av detaljer i bruset. Fler ser rikare ut och kostar mer att rita. | 2 till 4 |
| **Typ** | Fraktalt brus är mjukt och molnigt, turbulens är skarpare och mer strimmigt. | Fraktalt brus |
| **Färg** | Enfärgat håller din palett exakt, färgbrus ger filmlika korn. | Enfärgat |
| **Blandningsläge** | Hur bruset blandas med färgen. Överlägg ger kontrast, Mjukt ljus är mildare, Multiplicera mörkar bara. | Överlägg eller Mjukt ljus |
| **Opacitet** (mängd) | Total styrka. | 8 till 20 % |
| **Seed** | Vilket slumpmönster du får. Ändra den om du ser en klump du ogillar. | Valfri |

Reglagen bakom varje brusgenerator, med enkla ord.

> **Bedöm bruset i slutstorleken** Brus som ser rätt ut inzoomat på en laptop försvinner ofta på en telefon eller blir sörja efter en uppladdning. Kontrollera exporten i den storlek folk kommer att se den, på den skärm de kommer att använda.

## Så gör du en brusgradient i CSS

Den renaste metoden lägger en SVG-brusbild över din gradient i en enda `background`-deklaration och blandar dem sedan. Byt ut gradienten mot vilket recept ovan som helst och ställ in frekvens och opacitet från tabellen.

```css
.noise-gradient {
  position: relative;
  isolation: isolate;
  background: radial-gradient(circle at 70% 25%, #8b5cf6 0%, #3b1a78 40%, #0e0820 80%);
}

.noise-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Recipe 1: frequency 0.85, 3 octaves */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.08;
}
```

Recept 1 i CSS. Bruset ligger på ett pseudoelement under innehållet, så att texten förblir skarp. `stitchTiles` gör att rutan upprepas utan skarvar.

### Metoden med högkontrastprickar

För ett djärvare, nästan risografiskt utseende lägger du bruset och gradienten i samma lager och kör dem genom ett kontrastfilter. Bruset krossas till hårda prickar som följer gradientens ljus. Det är högljuddare än recept 3, så använd det till affischer och hjältebanners, inte bakom brödtext.

```css
.speckle {
  background:
    linear-gradient(160deg, #ff7a3d 0%, transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  filter: contrast(170%) brightness(1000%);
  mix-blend-mode: multiply; /* over a coloured parent, e.g. #5b2a86 */
}
```

Kontrasten krossar mjukt brus till prickar, och den starka ljusheten skjuter resten mot vitt. Multiplicera lägger sedan resultatet över en färgad förälder. Justera de två filtervärdena tillsammans och håll texten i ett separat lager ovanför.

## Välj rätt brus för formatet

Brus är relativt till ytan. Samma filter läses som fint på en telefonstory och grovt på en liten banner, så skala frekvensen efter formatet i stället för att återanvända en fil överallt.

En stående nedräkningsstory på en kornig violett gradientbakgrund

En story i 1080×1920 ses på nära håll på en telefon: håll bruset fint och ganska lätt.

En bred webbplatshjälte med rubrik över en mjukt kornig varm gradient

En webbplatshjälte i 1920×1080 fyller en stor skärm: sänk opaciteten, eftersom stora ytor gör bruset tydligt.

- **Stories och inlägg:** frekvens runt 0,8, opacitet 8 till 14 procent. Lite mer än du tror, eftersom uppladdningar mjukar upp det.
- **Webbplatshjältar:** frekvens 0,7 till 0,9, opacitet 4 till 10 procent. Se [bakgrunder för webbplatshjältar](https://gradiently.design/sv/guide/website-hero-background).
- **Affischer för tryck:** grövre korn, frekvens 0,5 till 0,7 i slutlig pixelstorlek, så att det överlever tryckpressen.
- **Mörka bakgrunder:** halvera din vanliga mängd. [Mörka gradientbakgrunder](https://gradiently.design/sv/guide/dark-gradient-backgrounds) förklarar varför skuggor visar korn först.

## Brusgradient eller kornig gradient

De är samma idé med olika betoning. Man säger kornig gradient när man menar utseendet och brusgradient när man menar hur den görs. [Korniga gradienter](https://gradiently.design/sv/guide/grainy-gradients) tar upp varför korn fungerar och var du placerar det, den här sidan är receptboken. Vill du ha textur utan färgblandning, börja med [korntextur](https://gradiently.design/sv/guide/textured-background) i stället.

Vill du slippa justera reglage alls bär varje Mark i Gradiently sin egen kornsetting vid sidan av färger, ljus och rörelse, renderad på nytt i varje storlek så att brus aldrig sträcks eller suddas ut. Designa med vilken oclaimad Mark som helst, gratis.

## FAQ

### Vad är en brusgradient?

En len färgblandning med ett fint lager slumpmässigt brus ovanpå. Bruset ger den en tryckt yta och döljer bandning.

### Vilka brusinställningar ska jag använda för en gradient?

Fraktalt brus, enfärgat, en frekvens på 0,6 till 0,9 och 2 till 4 oktaver, blandat i Överlägg eller Mjukt ljus med ungefär 8 till 20 procents opacitet.

### Hur lägger jag till brus i en gradient i CSS?

Lägg en inbäddad SVG med ett `feTurbulence`-filter över gradienten, på ett pseudoelement, och sätt `mix-blend-mode: overlay` med låg opacitet.

### Varför ser min brusgradient suddig ut efter uppladdning?

Plattformar komprimerar om bilder och jämnar ut fina detaljer. Exportera i plattformens exakta storlek som PNG eller högkvalitativ JPEG, och använd lite mer brus för sociala inlägg.

### Är en brusgradient samma sak som en kornig gradient?

Ja, i praktiken. Kornig beskriver utseendet och brus beskriver metoden som används för att göra den.