# Gradienttextur: korn, papper, glas och siden förklarade

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

Två gradienter med identiska färger kan kännas som en filmruta, ett boktryckskort, en telefonskärm eller en aftonklänning. Skillnaden är texturen, och den säger mer än färgerna gör.

## The short version

- Gradienttextur är varje ytdetalj som läggs över en färgövergång, som korn, pappersfibrer, glas eller en sidenglans, och som får den att läsas som ett material.
- Varje texturfamilj bär sina egna associationer: korn antyder film och tryck, papper antyder hantverk, glas antyder teknik och siden antyder lyx.
- Textur ändrar en gradients karaktär mer än ett färgbyte gör, vilket är varför den är en av de svåraste sakerna att kopiera.
- Texturer kan staplas, oftast som en struktur som siden eller räfflor, en yta som korn eller papper och ett ljus ovanpå.
- Textur ska hålla sig ur vägen för ord: ljusare bakom text, kraftigare i öppna områden.

**Gradienttextur** är ytan du lägger över en färgövergång så att den läses som ett material snarare än en skärmstandard: ett fint korn som film, pappersstrukturen, glasets klarhet och ljusbrytning eller sidenets mjuka veck. Färgerna säger vilken stämning du är i; texturen säger vad saken är gjord av. Därför kan två gradienter med identiska färger kännas helt olika, och därför är textur en av de mest särpräglade delarna av en visuell identitet.

## De fyra texturfamiljerna

| Textur | Hur den ser ut | Vad den säger | Passar för |
| --- | --- | --- | --- |
| Korn | Fina slumpmässiga prickar över färgen | Film, tryck, analog värme | Redaktionellt, musik, fotografi, de flesta varumärken |
| Papper | Mjuka fibrer och struktur, en varm off-white botten | Hantverk, lugn, något gjort för hand | Pappersvaror, mat, böcker, studior |
| Glas | Klarhet, suddighet, ljusbrytning, skarpa högdagrar | Teknik, precision, djup | Appar, mjukvara, hårdvara, finans |
| Siden | Mjuka veck med mjuka, rörliga högdagrar | Lyx, mjukhet, sinnlighet | Skönhet, mode, parfym, smycken |

Fyra familjer, fyra röster. Välj den som matchar vad ditt varumärke skulle vara gjort av om det var ett föremål.

## Korn: film och tryck

Korn är den mest mångsidiga texturen och den lättaste att lägga till. Ett fint lager enfärgat brus får en övergång att kännas fotograferad eller tryckt, och det döljer också den bandning som jämna digitala gradienter ofta visar. Det fungerar med nästan vilken palett som helst, vilket är varför det har blivit den självklara sista touchen. Hur mycket du ska använda, och hur, står i [korniga gradienter](https://gradiently.design/sv/guide/grainy-gradients).

## Papper: hantverk och lugn

Pappersstruktur ger en varm off-white botten, mjuka fibrer och en liten ojämnhet, som om gradienten hade tryckts eller målats. Den passar naturligt med bleka färger, dämpade bläck och serifer. Håll färgblommorna små och låt pappret synas; en pastellfärgad eller jordnära gradient på papper känns handgjord på ett sätt en ren vit botten aldrig gör. Se [pastellgradienter](https://gradiently.design/sv/guide/pastel-gradients) för paletter som passar.

- Papper: aprikosblomning: `radial-gradient(circle at 20% 25%, #f3c9a8 0%, #f5ebe0 45%, #efe6da 100%)`
- Siden: vinröd satin: `linear-gradient(115deg, #5b1733 0%, #9d2a55 22%, #e8a3b8 30%, #9d2a55 40%, #4a0f28 60%, #b8456f 72%, #5b1733 100%)`
- Glas: räfflat: `repeating-linear-gradient(90deg, #0f3d4c 0px, #1f6f86 14px, #8fd3e8 18px, #1f6f86 22px, #0f3d4c 36px)`
- Glas: ruta med reflex: `linear-gradient(160deg, #0f172a 0%, #1e3a8a 45%, #93c5fd 49%, #1e3a8a 53%, #0f172a 100%)`

Texturskisser med enskilda CSS-gradienter. Satin kommer av skarpa, ljusa band mellan mörkare veck; räfflat glas av upprepade smala högdagrar; en ruta av en enda tunn reflex.

## Glas: teknik och djup

Glastexturer finns i två slag. Frostat glas suddar ut det som ligger bakom, vilket är grunden för [glassmorphism](https://gradiently.design/sv/guide/glassmorphism). Klart eller räfflat glas bryter färgen i band och lägger till skarpa högdagrar där ljuset fångas av en kant. Båda antyder precision och modern hårdvara. Nyckeln är högdagern: en tunn, ljus linje placerad där ljuset skulle träffa, och mörkare färg överallt annars.

## Siden: lyx och mjukhet

Siden och satin ser ut som mjuka veck av tyg: breda mjuka skuggor och smala, ljusa högdagrar där tyget vänder sig mot ljuset. På en skärm betyder det en gradient med skarpa ljusband mellan djupare toner, ofta i en enda nyans. Djupa juvelfärger, som vin, smaragd och midnatt, läses som aftonkläder; bleka, som champagne och rodnad, läses som brud eller hudvård. Siden fungerar vackert i slow motion, där högdagrarna kan driva.

## Så staplar du texturer

Verkliga material kombinerar texturer: siden har en glans och en väv, tryckt papper har fibrer och bläckkorn. Gradienter kan göra detsamma, så länge varje lager har ett tydligt uppdrag. En pålitlig ordning är färg, sedan struktur, sedan yta, sedan ljus.

1. **Färgfält** Själva övergången: din gradient, mesh eller glöd. Få det här rätt först; textur kan inte rädda en grumlig palett.
2. **Struktur** Materialets storskaliga form: sidenveck, glasräfflor, papperets mjuka ojämnhet. Den ändrar hur färgen flödar.
3. **Yta** Den fina detaljen: korn eller pappersstruktur. Den ligger över allt och får ytan att kännas fysisk.
4. **Ljus** Högdagrar och skuggor som talar om för ögat varifrån ljuset kommer. En enda konsekvent ljuskälla får alla lager att läsas som ett föremål.

```css
.silk {
  position: relative;
  isolation: isolate;
  /* colour and structure: satin folds in one hue */
  background: linear-gradient(115deg, #5b1733 0%, #9d2a55 22%, #e8a3b8 30%, #9d2a55 40%, #4a0f28 60%, #b8456f 72%, #5b1733 100%);
}

.silk::after {
  /* surface: fine monochrome grain */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  opacity: 0.25;
}
```

Två lager staplade: en satinstruktur i gradienten och en fin kornyta blandad ovanpå med Soft Light.

## Textur och läsbarhet

Textur lägger till detaljer, och detaljer bakom små bokstäver gör dem svårare att läsa. Håll texturen ljusare bakom text och kraftigare i öppna områden, och håll text och logotyper ovanför alla texturlager så att deras kanter förblir skarpa. Starka sidenhögdagrar och glasreflexer är den största risken, eftersom de skapar ljusa linjer som kan skära genom ett ord. Se [text på röriga bakgrunder](https://gradiently.design/sv/guide/type-on-busy-backgrounds).

Ett citatinlägg där den texturerade bakgrunden går i full styrka bakom orden

Textur i full styrka bakom orden: ytan konkurrerar med meningen.

Samma citatinlägg med ett lugnare område av den texturerade bakgrunden bakom orden

Samma material som slappnar av bakom orden: textur där det finns utrymme, lugn där det finns text.

## Textur som identitet

Färger kan samplas ur en skärmdump på några sekunder. En textur, och hur den beter sig med ljus och rörelse, är mycket svårare att återskapa. Det gör textur till ett av de starkaste sätten att göra en gradient till din egen. Varje Mark i Gradiently staplar upp till tre material över sina färger, med eget ljus och eget korn, och i Forge väljer du dem reglage för reglage.

En Mark är färger plus material, ljus, korn och rörelse. Materialen är det som får den att kännas som ett föremål.

## FAQ

### Vad är gradienttextur?

Gradienttextur är ytdetaljer som läggs över en färgövergång, som korn, papper, glas eller siden, så att gradienten läses som ett material.

### Vilken textur ska jag använda på en gradient?

Matcha texturen mot vad ditt varumärke skulle vara gjort av: korn för film och tryck, papper för hantverk, glas för teknik, siden för lyx.

### Hur lägger jag till textur på en gradient i CSS?

Lägg en brus- eller mönsterbild över gradienten med ett blandningsläge som Soft Light eller Overlay, på låg opacitet.

### Kan man kombinera texturer på en gradient?

Ja. Stapla dem efter uppdrag: färgfält, sedan struktur som sidenveck, sedan yta som korn, sedan ljus.

### Gör textur text svårare att läsa?

Det kan den göra. Håll texturen ljusare bakom ord och håll texten ovanför alla texturlager.