# Gradientmaterial förklarade: siden, norrsken, korn och resten [Canonical HTML page](https://gradiently.design/sv/guide/mark-materials-explained) Två Marks kan dela palett och ändå se helt olika ut, eftersom materialet avgör hur färgen beter sig. En rundtur bland familjerna, hur lager, ljus och korn samverkar och vad var och en säger. ## The short version - Ett gradientmaterial är den struktur som färgen fyller: en glans, en glöd, en väv, en sten, ett korn. - Varje Gradiently-Mark byggs av upp till tre staplade materiallager, ett bas och upp till två till som blandas ovanpå. - Gradientlys material är grupperade i fjorton familjer, från Gradient och Ljus till Textil, Mineral, Glas, Metall och Färg. - Ljus, korn och rörelse ställs in i varje lager, så samma material kan vara stilla eller dramatiskt. - Välj material efter vad ytan antyder: korn för tryck och hantverk, siden för lyx, glas och krom för teknik. **Gradientmaterial** är det som får en gradient att se ut som något i stället för en blandning mellan två färger. Ett material är den struktur som färgen fyller: en riktad glans i Siden, ljusdraperier i Norrsken, mjuka blomningar i Mesh, sand i Silt, ådror i marmor. Varje Gradiently-Mark staplar upp till tre av dem och lägger sedan till ljus, korn och rörelse, och därför kan två Marks med samma palett se helt olika ut. ## Vad ett material är Tänk på paletten som färgen och på materialet som ytan den läggs på. Häll samma marinblå, blågröna och orange på siden, frostat glas eller handgjort papper och du får tre olika föremål. I en Mark hämtar varje material från Markens egen palett, så att byta material ändrar karaktären utan att ändra färgerna. - Siden: en riktad glans: `linear-gradient(115deg, #1b2a3a 0%, #2f5d62 30%, #9fd3c7 46%, #2f5d62 60%, #1b2a3a 100%)` - Norrsken: ljus som stiger från en fåll: `linear-gradient(0deg, #9fd3c7 0%, #2f5d62 18%, #1b2a3a 55%, #0b1419 100%)` - Mesh: mjuka blomningar: `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: en ljuspöl: `radial-gradient(circle at 50% 40%, #d9822b 0%, #6b3410 30%, #0b1419 70%)` CSS-skisser av fyra material i en palett. Riktiga Marks ritar en långt rikare struktur, men även de här visar hur mycket materialet avgör. ## De fjorton materialfamiljerna Gradiently grupperar sina material i familjer efter vad de liknar. Namnen nedan är riktiga material du möter på [Marknaden](/market), och varje familj rymmer många fler. | Familj | Vad det är | Material du möter | | --- | --- | --- | | Gradient | Blandningar, klot och färgfält | Hörn, Klot, Kornighet, Pärla | | Ljus | Sken, reflexer och strålar | Halo, Scen, Neon, Strålar | | Flytande | Vätskor, bläck och metall | Bläck, Kvicksilver, Hällning, Lava | | Atmosfär | Dimma, moln och himmel | Dis, Skymning, Cumulus, Sjödimmor | | Kosmisk | Gas, stjärnor och rymden | Nebulosa, Galax, Vintergatan, Förmörkelse | | Organisk | Tillväxt, celler och kronblad | Celler, Korall, Ros, Ormbunke | | Mineral | Sten, marmor och sand | Åder, Silt, Agat, Travertin | | Textil | Siden, väv och stickning | Siden, Linne, Sammet, Satin | | Glas | Frost, prisma och vatten | Frostat, Prisma, Räfflat, Målat glas | | Geometrisk | Linjer, prickar och plattor | Halvton, Bågar, Rutnät, Truchet | | Korn | Papper, tryck och film | Fiber, Riso, Film, Dither | | Metall | Borstad, anodiserad och smält | Borstat, Anodiserat, Smält, Patina | | Färg | Olja, gouache och pensel | Impasto, Gouache, Akryl, Sprejfärg | | Digitalt | Skärmar, glitch och pixlar | Bildrör, Glitch, Pixelsortering, LED-vägg | Familjerna så som Gradiently kallar dem. Korn är en egen familj och också en inställning i varje lager. ### Siden, norrsken och mesh De här tre är de som folk frågar mest om. **Siden** är en riktad glans över fina trådar: elegant, lite formell och hemma i skönhet och mode. **Norrsken** är ljusdraperier som stiger från en ljus fåll upp i en mörk himmel, dramatiskt på en tom botten. **Mesh** är mjuka färgblomningar som smälter in i varandra, den klassiska moderna gradienten, vänlig och mångsidig. [Sidengradienter](https://gradiently.design/sv/guide/silk-gradient), [norrskensgradienter](https://gradiently.design/sv/guide/aurora-gradients) och [meshgradienter](https://gradiently.design/sv/guide/mesh-gradients) har var sin guide med CSS. ### Korn, papper och tryck Kornfamiljen får en skärm att se tryckt ut. **Fiber** är handgjort papper med långa fibrer och enstaka fläckar, **Riso** är ett tryck i två färger, **Film** är filmkorn och **Dither** stegar färg i pixlar. De passar mat, hantverk, böcker och allt som ska kännas handgjort. De döljer också banding, de ränder som uppstår i mjuka gradienter, vilket [korniga gradienter](https://gradiently.design/sv/guide/grainy-gradients) förklarar. ## Hur lager staplas En Mark har ett baslager och upp till två till ovanpå. Varje övre lager har sin egen opacitet och ett blandningsläge (normal, screen, multiply, overlay eller mjukt), samma idé som lager i ett bildredigeringsprogram. Ett vanligt recept är en bred bas som Mesh eller Dis för färgfältet, ett strukturlager som Linne eller Halvton för textur och ett ljuslager som Halo eller Ljusläcka för 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 staplade lager i CSS, översta först: samma bas-, textur- och ljusstruktur som en Mark använder, i sin enklaste form. ## Ljus, korn och rörelse Inuti varje lager ändrar en handfull inställningar hur materialet beter sig: dess skala, hur mycket det förvrängs, hur mycket finlir det visar, hur starkt det är belyst, hur mycket korn som ligger på det och hur mycket det rör sig. Samma Siden kan vara ett tätt, klart skimmer eller ett brett, dämpat draperi. Rörelsen delas av hela Marken, med egen fart och drift, så att lagren rör sig tillsammans i stället för mot varandra. En lugn stående design med en mjuk, bred gradient och ett enda ord, Stilla En lugn Mark: bred struktur och milt ljus lämnar gott om plats för ord. En levande stående design med detaljerad, ljus struktur och ett enda ord, Högljutt En livligare Mark: finare detaljer och starkare ljus passar lanseringar och events. Detaljer och ord konkurrerar, och därför lugnar Marks stökiga detaljer nära text av sig själva. En Mark vet var orden finns: dess lugnaste område flyttar sig bakom texten och färgerna nära bokstäverna fördjupas eller lyfts, så att även ett strukturerat material håller din rubrik läsbar. ## Så väljer du material ### Lugna, vardagliga - Mesh, Dis, Silt, Linne, Fiber - Breda former, lite detaljer - Lätta bakom långa rubriker - Bra för dagliga inlägg och menyer ### Slående, för tillfällen - Norrsken, Neon, Krom, Glitch, Holografisk folie - Starkt ljus, fin struktur - Bäst med mycket få ord - Bra för lanseringar, events, omslag Fråga vad ditt varumärke är gjort av. Ett bageri är mjöl, papper och varmt ljus, så Fiber eller Lavering. En studio som säljer mjukvara är glas och rent ljus, så Frostat eller Prisma. Fråga sedan hur ofta du ska publicera på det: ju oftare, desto lugnare bör det vara. [Så väljer du rätt Mark](https://gradiently.design/sv/guide/pick-the-right-mark) går igenom resten av beslutet, och på Marknaden kan du filtrera direkt på material. ## FAQ ### Vad är ett gradientmaterial? Den struktur som en gradients färger fyller, som en glans, en glöd, en väv eller en sten. Den avgör om färgen läses som siden, glas, papper eller ljus. ### Hur många lager kan en Mark ha? Upp till tre: ett baslager och upp till två till ovanpå, var och ett med egen opacitet och eget blandningsläge. ### Vad är skillnaden mellan siden och norrsken? Siden är en riktad glans över fina trådar. Norrsken är ljusdraperier som stiger från en ljus kant upp i en mörk himmel. ### Gör korn text svårare att läsa? Lite korn gör det sällan, och det döljer banding. Marks lugnar också stökiga detaljer bakom ord, så att texten förblir läsbar. ### Kan jag söka på Marknaden efter material? Ja. Marknaden går att filtrera på material, och även på färg, botten, stämning och stil, och den går att söka i med ord som ”blått siden”.