# Gradientmaterialer forklart: silke, nordlys, korn og resten

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

To Marks kan ha samme palett og se helt ulike ut, fordi materialet avgjør hvordan fargen oppfører seg. Her får du en oversikt over familiene, samspillet mellom lag, lys og korn, og hva de uttrykker.

## The short version

- Et gradientmateriale er strukturen fargen fyller: en glans, et skjær, en vev, en stein eller korn.
- Hver Gradiently-Mark er bygd av opptil tre materiallag, et grunnlag og opptil to lag blandet oppå.
- Materialene i Gradiently er delt i fjorten familier, fra Gradient og Lys til Tekstil, Mineral, Glass, Metall og Maling.
- Lys, korn og bevegelse stilles inn i hvert lag, så samme materiale kan være rolig eller dramatisk.
- Velg et materiale etter hva overflaten uttrykker: korn for trykk og håndverk, silke for luksus, glass og krom for teknologi.

**Gradientmaterialer** får en gradient til å ligne noe mer enn en blanding av to farger. Et materiale er strukturen fargen fyller: retningsbestemt glans i Silke, lysgardiner i Nordlys, myke fargeskyer i Mesh, sand i Silt og årer i marmor. Hver Gradiently-Mark stabler opptil tre av dem og legger til lys, korn og bevegelse. Derfor kan to Marks med samme palett se helt ulike ut.

## Hva et materiale er

Tenk på paletten som maling og materialet som overflaten malingen legges på. Hell samme marineblå, blågrønne og oransje farger på silke, frostet glass eller håndlaget papir, så får du tre ulike gjenstander. I en Mark bruker hvert materiale Markens egen palett, så et materialbytte endrer karakteren uten å endre fargene.

- Silke: retningsbestemt glans: `linear-gradient(115deg, #1b2a3a 0%, #2f5d62 30%, #9fd3c7 46%, #2f5d62 60%, #1b2a3a 100%)`
- Nordlys: lys stiger fra en kant: `linear-gradient(0deg, #9fd3c7 0%, #2f5d62 18%, #1b2a3a 55%, #0b1419 100%)`
- Mesh: myke fargeskyer: `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 lysflekk: `radial-gradient(circle at 50% 40%, #d9822b 0%, #6b3410 30%, #0b1419 70%)`

CSS-skisser av fire materialer i én palett. Ekte Marks gjengir langt rikere struktur, men selv disse viser hvor mye materialet avgjør.

## De fjorten materialfamiliene

Gradiently grupperer materialene etter hva de ligner. Navnene under er faktiske materialer du møter på [Markedet](/market); hver familie har mange flere.

| Familie | Hva det er | Materialer du møter |
| --- | --- | --- |
| Gradient | Blandinger, kuler og fargefelt | Hjørner, Kuler, Dun, Perle |
| Lys | Skjær, gjenskinn og stråler | Halo, Scene, Neon, Stråler |
| Flytende | Væsker, blekk og metall | Blekk, Kvikksølv, Strøm, Lava |
| Atmosfære | Tåke, skyer og himmel | Dis, Skumring, Cumulus, Innsjødis |
| Kosmisk | Gass, stjerner og verdensrommet | Stjernetåke, Galakse, Melkeveien, Formørkelse |
| Organisk | Vekst, celler og kronblader | Celler, Korall, Rose, Bregne |
| Mineral | Stein, marmor og sand | Åre, Silt, Agat, Travertin |
| Tekstil | Silke, vev og strikk | Silke, Lin, Fløyel, Sateng |
| Glass | Frost, prisme og vann | Frostet, Prisme, Riflet, Glassmaleri |
| Geometrisk | Linjer, prikker og fliser | Halvtone, Buer, Rutenett, Truchet |
| Korn | Papir, trykk og film | Fiber, Riso, Film, Dither |
| Metall | Børstet, anodisert og smeltet | Børstet, Anodisert, Smeltet, Patina |
| Maling | Olje, gouache og pensel | Impasto, Gouache, Akryl, Spraymaling |
| Digital | Skjermer, bildefeil og piksler | CRT, Bildefeil, Pikselsortering, LED-vegg |

Familiene slik Gradiently navngir dem. Korn er en egen familie og også en innstilling i hvert lag.

### Silke, nordlys og mesh

Disse tre spør folk oftest om. **Silke** har retningsbestemt glans over fine tråder: elegant, litt formelt og godt egnet til skjønnhet og mote. **Nordlys** er lysgardiner som stiger fra en lys kant til en mørk himmel, dramatisk på en dypmørk bakgrunn. **Mesh** er myke fargeskyer som smelter inn i hverandre, den klassiske moderne gradienten, vennlig og allsidig. [Silkegradienter](https://gradiently.design/nb/guide/silk-gradient), [nordlysgradienter](https://gradiently.design/nb/guide/aurora-gradients) og [mesh-gradienter](https://gradiently.design/nb/guide/mesh-gradients) har hver sin guide med CSS.

### Korn, papir og trykk

Korn-familien får en skjerm til å se trykt ut. **Fiber** er håndlaget papir med lange fibre og en og annen prikk, **Riso** er trykk med to farger, **Film** er filmkorn, og **Dither** deler fargen i pikseltrinn. De passer til mat, håndverk, bøker og alt som skal føles håndlaget. De skjuler også bånding, stripene som oppstår i glatte gradienter, som [kornete gradienter](https://gradiently.design/nb/guide/grainy-gradients) forklarer.

## Slik stables lagene

En Mark har et grunnlag og opptil to lag oppå. Hvert øvre lag har egen opasitet og blandingsmodus, som normal, screen, multiply, overlay eller soft, samme idé som lag i et bilderedigeringsprogram. En vanlig oppskrift er et bredt grunnlag som Mesh eller Dis for fargefeltet, et strukturlag som Lin eller Halvtone for tekstur, og et lyslag som Halo eller Lyslekk for 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 lag stablet i CSS, det øverste først: samme struktur med grunnlag, tekstur og lys som en Mark bruker, i sin enkleste form.

## Lys, korn og bevegelse

I hvert lag endrer noen innstillinger hvordan materialet oppfører seg: skalaen, hvor mye det forvrenges, hvor mange fine detaljer det viser, hvor sterkt det belyses, hvor mye korn det har, og hvor mye det beveger seg. Samme Silke kan være et tett, lyst skimmer eller en bred, dempet drapering. Bevegelsen deles av hele Marken, med egen hastighet og drift, så lagene beveger seg sammen fremfor mot hverandre.

Et rolig stående design med en myk, bred gradient og ett ord, Rolig

En rolig Mark: bred struktur og mykt lys gir god plass til ordene.

Et livlig stående design med lys, detaljert tekstur og ett ord, Livlig

En livligere Mark: finere detaljer og sterkere lys passer lanseringer og arrangementer.

Detaljer og ord konkurrerer. Derfor roer Marks ned urolige detaljer nær tekst automatisk. En Mark vet hvor ordene er: den roligste delen flytter seg bak teksten, og fargene nær bokstavene blir mørkere eller lysere. Slik holder selv et teksturrikt materiale overskriften leselig.

## Slik velger du materiale

### Rolig, til hverdags

- Mesh, Dis, Silt, Lin, Fiber
- Brede former, få detaljer
- Passer bak lange overskrifter
- Godt til daglige innlegg og menyer

### Slående, ved anledninger

- Nordlys, Neon, Krom, Bildefeil, Holofolie
- Sterkt lys, fin struktur
- Best med svært få ord
- Godt til lanseringer, arrangementer og forsider

Spør hva merkevaren din består av. Et bakeri er mel, papir og varmt lys, så Fiber eller Lavering. Et studio som selger programvare, er glass og rent lys, så Frostet eller Prisme. Spør så hvor ofte du skal publisere med bakgrunnen: jo oftere, desto roligere bør den være. [Slik velger du riktig Mark](https://gradiently.design/nb/guide/pick-the-right-mark) tar deg gjennom resten av valget, og Markedet lar deg filtrere direkte etter materiale.

## FAQ

### Hva er et gradientmateriale?

Strukturen gradientens farger fyller, som glans, skjær, vev eller stein. Den avgjør om fargen oppfattes som silke, glass, papir eller lys.

### Hvor mange lag kan en Mark ha?

Opptil tre: et grunnlag og opptil to lag oppå, hvert med egen opasitet og blandingsmodus.

### Hva er forskjellen på silke og nordlys?

Silke har retningsbestemt glans over fine tråder. Nordlys er lysgardiner som stiger fra en lys kant til en mørk himmel.

### Gjør korn teksten vanskeligere å lese?

Litt korn gjør sjelden det, og det skjuler bånding. Marks roer også ned urolige detaljer bak ordene, så teksten holder seg leselig.

### Kan jeg søke på Markedet etter materiale?

Ja. Markedet kan filtreres etter materiale, farge, bakgrunn, stemning og stil, og søkes med ord som «blå silke».