# Gradientmaterialer forklaret: silke, nordlys, korn og resten

[Canonical HTML page](https://gradiently.design/da/guide/mark-materials-explained)

To Marks kan dele palet og alligevel ligne hinanden på ingen måde, fordi materialet bestemmer, hvordan farven opfører sig. En rundtur i familierne, hvordan lag, lys og korn spiller sammen, og hvad hver enkelt siger.

## The short version

- Et gradientmateriale er den struktur, farven fylder: en glans, en glød, en vævning, en sten, et korn.
- Hver Gradiently-Mark er bygget af op til tre stablede materialelag, en bund og op til to mere blandet ovenpå.
- materialer i Gradiently er samlet i fjorten familier, fra Gradient og Lys til Tekstil, Mineral, Glas, Metal og Maling.
- Lys, korn og bevægelse indstilles i hvert lag, så det samme materiale kan være stille eller dramatisk.
- Vælg et materiale efter, hvad dets overflade antyder: korn til tryk og håndværk, silke til luksus, glas og krom til teknologi.

**Gradientmaterialer** er det, der får en gradient til at ligne noget frem for en blanding mellem to farver. Et materiale er den struktur, farven fylder: en retningsbestemt glans i Silke, gardiner af lys i Nordlys, bløde skyer i Mesh, sand i Silt, årer i marmor. Hver Gradiently-Mark stabler op til tre af dem og tilføjer så lys, korn og bevægelse, og derfor kan to Marks med samme palet ligne hinanden på ingen måde.

## Hvad et materiale er

Tænk på paletten som malingen og materialet som den overflade, den lægges på. Hæld den samme marineblå, petrol og orange på silke, matteret glas eller håndlavet papir, og du får tre forskellige ting. I en Mark henter hvert materiale farver fra Markens egen palet, så et skift af materiale ændrer karakteren uden at ændre farverne.

- Silke: én retningsbestemt glans: `linear-gradient(115deg, #1b2a3a 0%, #2f5d62 30%, #9fd3c7 46%, #2f5d62 60%, #1b2a3a 100%)`
- Nordlys: lys, der stiger fra en kant: `linear-gradient(0deg, #9fd3c7 0%, #2f5d62 18%, #1b2a3a 55%, #0b1419 100%)`
- Mesh: bløde skyer: `radial-gradient(circle at 30% 35%, #d9822b 0%, transparent 40%), radial-gradient(circle at 70% 65%, #2f5d62 0%, transparent 45%), linear-gradient(135deg, #1b2a3a 0%, #2f5d62 100%)`
- Halo: én lyspøl: `radial-gradient(circle at 50% 40%, #d9822b 0%, #6b3410 30%, #0b1419 70%)`

CSS-skitser af fire materialer i én palet. Rigtige Marks gengiver langt rigere struktur, men selv disse viser, hvor meget materialet bestemmer.

## De fjorten materialefamilier

Gradiently samler sine materialer i familier efter, hvad de minder om. Navnene nedenfor er rigtige materialer, du vil møde på [Markedet](/market); hver familie rummer mange flere.

| Familie | Hvad den er | Materialer, du vil møde |
| --- | --- | --- |
| Gradient | Blandinger, kugler og farvefelter | Hjørner, Kugler, Fnug, Perle |
| Lys | Skær, genskin og stråler | Halo, Scene, Neon, Stråler |
| Flydende | Væsker, blæk og metal | Blæk, Kviksølv, Strøm, Lava |
| Atmosfære | Tåge, skyer og himmel | Dis, Skumring, Cumulus, Sødis |
| Kosmisk | Gas, stjerner og det dybe rum | Stjernetåge, Galakse, Mælkevejen, Formørkelse |
| Organisk | Vækst, celler og kronblade | Celler, Koral, Rose, Bregne |
| Mineral | Sten, marmor og sand | Åre, Silt, Agat, Travertin |
| Tekstil | Silke, vævning og strik | Silke, Hør, Fløjl, Satin |
| Glas | Frost, prisme og vand | Matteret, Prisme, Riflet, Glasmosaik |
| Geometrisk | Linjer, prikker og fliser | Halvtone, Buer, Gitter, Truchet |
| Korn | Papir, tryk og film | Fiber, Riso, Film, Dither |
| Metal | Børstet, anodiseret og smeltet | Børstet, Anodiseret, Smeltet, Patina |
| Maling | Olie, gouache og pensel | Impasto, Gouache, Akryl, Spraymaling |
| Digital | Skærme, billedfejl og pixels | CRT, Billedfejl, Pixelsortering, LED-væg |

Familierne, som Gradiently navngiver dem. Korn er en familie for sig og også en indstilling i hvert lag.

### Silke, Nordlys og Mesh

Det er de tre, folk spørger mest om. **Silke** er en retningsbestemt glans hen over fine tråde: elegant, lidt formel og hjemme i skønhed og mode. **Nordlys** er gardiner af lys, der stiger fra en lys kant op i en mørk himmel, dramatisk på en helt mørk bund. **Mesh** er bløde farveskyer, der smelter ind i hinanden, den klassiske moderne gradient, venlig og alsidig. [Silkegradienter](https://gradiently.design/da/guide/silk-gradient), [nordlysgradienter](https://gradiently.design/da/guide/aurora-gradients) og [mesh-gradienter](https://gradiently.design/da/guide/mesh-gradients) har hver deres guide med CSS.

### Korn, papir og tryk

Korn-familien får en skærm til at se trykt ud. **Fiber** er håndlavet papir med lange fibre og en enkelt prik hist og her, **Riso** er et tryk i to farver, **Film** er filmkorn, **Dither** trapper farven i pixels. De passer til mad, håndværk, bøger og alt, der skal føles håndlavet. De skjuler også banding, de striber, der opstår i bløde gradienter, som [kornede gradienter](https://gradiently.design/da/guide/grainy-gradients) forklarer.

## Hvordan lag stables

En Mark har et bundlag og op til to mere ovenpå. Hvert øvre lag har sin egen opacitet og en blandingstilstand (normal, screen, multiply, overlay eller soft), samme idé som lag i et billedbehandlingsprogram. En almindelig opskrift er en bred bund som Mesh eller Dis til farvefeltet, et strukturlag som Hør eller Halvtone til tekstur og et lyslag som Halo eller Lyslæk til fokus.

```css
.card {
  background:
    /* top layer: a light, screened over the rest */
    radial-gradient(circle at 75% 20%, rgb(255 214 170 / 0.55) 0%, transparent 40%),
    /* middle layer: a fine stripe for texture */
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.05) 0 2px, transparent 2px 6px),
    /* base layer: the colour field */
    linear-gradient(160deg, #1b2a3a 0%, #2f5d62 60%, #5e8b7e 100%);
  background-blend-mode: screen, overlay, normal;
}
```

Tre stablede lag i CSS, øverste først: den samme struktur af bund, tekstur og lys, som en Mark bruger, i sin enkleste form.

## Lys, korn og bevægelse

I hvert lag ændrer en håndfuld indstillinger, hvordan materialet opfører sig: dets skala, hvor meget det forvrænges, hvor mange fine detaljer det viser, hvor kraftigt det er belyst, hvor meget korn der ligger på det, og hvor meget det bevæger sig. Den samme Silke kan være et tæt, klart skær eller et bredt, dæmpet fald. Bevægelse deles af hele Marken med sin egen hastighed og drift, så lagene bevæger sig sammen frem for imod hinanden.

Et roligt design i stående format med en blød, bred gradient og ét ord, Stille

En rolig Mark: bred struktur og blidt lys giver masser af plads til ord.

Et klart design i stående format med detaljeret, lys tekstur og ét ord, Højt

En mere livlig Mark: finere detaljer og stærkere lys passer til lanceringer og events.

Detaljer og ord konkurrerer, og derfor dæmper Marks selv travle detaljer tæt på tekst. En Mark ved, hvor ordene er: Dens roligste område flytter sig om bag teksten, og farverne tæt på bogstaverne bliver dybere eller lysere, så selv et materiale med tekstur holder din overskrift læselig.

## Sådan vælger du et materiale

### Roligt, til hverdag

- Mesh, Dis, Silt, Hør, Fiber
- Brede former, få detaljer
- Let bag lange overskrifter
- Godt til daglige opslag og menukort

### Slående, til særlige lejligheder

- Nordlys, Neon, Krom, Billedfejl, Holofolie
- Stærkt lys, fin struktur
- Bedst med meget få ord
- Godt til lanceringer, events og forsider

Spørg, hvad dit brand er lavet af. Et bageri er mel, papir og varmt lys, altså Fiber eller Lavering. Et studie, der sælger software, er glas og rent lys, altså Matteret eller Prisme. Spørg så, hvor ofte du vil poste med det: jo oftere, jo roligere skal det være. [Sådan vælger du den rigtige Mark](https://gradiently.design/da/guide/pick-the-right-mark) gennemgår resten af beslutningen, og på Markedet kan du filtrere direkte efter materiale.

## FAQ

### Hvad er et gradientmateriale?

Den struktur, en gradients farver fylder, for eksempel en glans, en glød, en vævning eller en sten. Den afgør, om farven læses som silke, glas, papir eller lys.

### Hvor mange lag kan en Mark have?

Op til tre: et bundlag og op til to mere ovenpå, hver med sin egen opacitet og blandingstilstand.

### Hvad er forskellen på Silke og Nordlys?

Silke er en retningsbestemt glans hen over fine tråde. Nordlys er gardiner af lys, der stiger fra en lys kant op i en mørk himmel.

### Gør korn tekst sværere at læse?

Lidt korn gør det sjældent, og det skjuler banding. Marks dæmper også travle detaljer bag ord, så teksten forbliver læselig.

### Kan jeg søge efter materiale på Markedet?

Ja. Markedet kan filtreres efter materiale samt farve, bund, stemning og stil, og du kan søge med ord som »blå silke«.