# Gradient materials explained: silk, aurora, grain and the rest [Canonical HTML page](https://gradiently.design/guide/mark-materials-explained) Two Marks can share a palette and look nothing alike, because the material decides how the colour behaves. A tour of the families, how layers, light and grain combine, and what each one says. ## The short version - A gradient material is the structure that colour fills: a sheen, a glow, a weave, a stone, a grain. - Every Gradiently Mark is built from up to three stacked material layers, a base and up to two more blended on top. - Gradiently's materials are grouped into fourteen families, from Gradient and Light to Textile, Mineral, Glass, Metal and Paint. - Light, grain and motion are set within each layer, so the same material can be quiet or dramatic. - Choose a material for what its surface suggests: grain for print and craft, silk for luxury, glass and chrome for technology. **Gradient materials** are what make a gradient look like something rather than a blend between two colours. A material is the structure the colour fills: a directional sheen in Silk, curtains of light in Aurora, soft blooms in Mesh, sand in Silt, veins in marble. Every Gradiently Mark stacks up to three of them, then adds light, grain and motion, which is why two Marks with the same palette can look nothing alike. ## What a material is Think of a palette as the paint and a material as the surface it is applied to. Pour the same navy, teal and orange onto silk, frosted glass or handmade paper and you get three different objects. In a Mark, each material draws from the Mark's own palette, so changing the material changes the character without changing the colours. - Silk: one directional sheen: `linear-gradient(115deg, #1b2a3a 0%, #2f5d62 30%, #9fd3c7 46%, #2f5d62 60%, #1b2a3a 100%)` - Aurora: light rising from a hem: `linear-gradient(0deg, #9fd3c7 0%, #2f5d62 18%, #1b2a3a 55%, #0b1419 100%)` - Mesh: soft blooms: `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: one pool of light: `radial-gradient(circle at 50% 40%, #d9822b 0%, #6b3410 30%, #0b1419 70%)` CSS sketches of four materials in one palette. Real Marks render far richer structure, but even these show how much the material decides. ## The fourteen material families Gradiently groups its materials into families by what they resemble. The names below are real materials you will meet in the [Market](/market); each family holds many more. | Family | What it is | Materials you will meet | | --- | --- | --- | | Gradient | Blends, orbs and colour fields | Corners, Orbs, Fuzz, Pearl | | Light | Glows, flares and beams | Halo, Stage, Neon, Rays | | Fluid | Liquids, ink and metal | Ink, Mercury, Pour, Lava | | Atmosphere | Fog, cloud and sky | Haze, Dusk, Cumulus, Lake mist | | Cosmic | Gas, stars and deep space | Nebula, Galaxy, Milky Way, Eclipse | | Organic | Growth, cells and petals | Cells, Coral, Rose, Fern | | Mineral | Stone, marble and sand | Vein, Silt, Agate, Travertine | | Textile | Silk, weave and knit | Silk, Linen, Velvet, Satin | | Glass | Frost, prism and water | Frosted, Prism, Reeded, Stained glass | | Geometric | Lines, dots and tiles | Halftone, Arcs, Grid, Truchet | | Grain | Paper, print and film | Fiber, Riso, Stock, Dither | | Metal | Brushed, anodised and molten | Brushed, Anodised, Molten, Patina | | Paint | Oil, gouache and brush | Impasto, Gouache, Acrylic, Spray Paint | | Digital | Screens, glitch and pixels | CRT, Glitch, Pixel Sort, LED Wall | The families as Gradiently names them. Grain is a family of its own, and also a setting inside every layer. ### Silk, aurora and mesh These three are the ones people ask about most. **Silk** is a directional sheen across fine threads: elegant, a little formal, at home with beauty and fashion. **Aurora** is curtains of light rising from a bright hem into a dark sky, dramatic on a void ground. **Mesh** is soft blooms of colour melting into each other, the classic modern gradient, friendly and versatile. [Silk gradients](https://gradiently.design/guide/silk-gradient), [aurora gradients](https://gradiently.design/guide/aurora-gradients) and [mesh gradients](https://gradiently.design/guide/mesh-gradients) each have their own guide with CSS. ### Grain, paper and print The Grain family makes a screen look printed. **Fiber** is handmade paper with long fibres and the odd speck, **Riso** is a two-ink print, **Stock** is film grain, **Dither** steps colour in pixels. They suit food, craft, books and anything that should feel made by hand. They also hide banding, the stripes that appear in smooth gradients, which [grainy gradients](https://gradiently.design/guide/grainy-gradients) explains. ## How layers stack A Mark has a base layer and up to two more on top. Each upper layer has its own opacity and a blend mode (normal, screen, multiply, overlay or soft), the same idea as layers in a photo editor. A common recipe is a broad base such as Mesh or Haze for the colour field, a structural layer such as Linen or Halftone for texture, and a light layer such as Halo or Leak for focus. ```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; } ``` Three stacked layers in CSS, top first: the same base, texture and light structure a Mark uses, in its simplest form. ## Light, grain and motion Inside every layer, a handful of settings change how the material behaves: its scale, how much it warps, how much fine detail it shows, how strongly it is lit, how much grain sits on it and how much it moves. The same Silk can be a tight, bright shimmer or a wide, dim drape. Motion is shared across the Mark, with its own speed and drift, so the layers move together rather than against each other. A calm portrait design with a soft, broad gradient and a single word, Quiet A calm Mark: broad structure and gentle light leave plenty of room for words. A vivid portrait design with detailed, bright texture and a single word, Loud A livelier Mark: finer detail and stronger light suit launches and events. Detail and words compete, which is why Marks relax busy detail near text by themselves. A Mark knows where the words are: its calmest region moves behind the text and colours near the letters deepen or lift, so even a textured material keeps your headline legible. ## How to choose a material ### Calm, everyday - Mesh, Haze, Silt, Linen, Fiber - Broad shapes, low detail - Easy behind long headlines - Good for daily posts and menus ### Striking, occasional - Aurora, Neon, Chrome, Glitch, Holofoil - Strong light, fine structure - Best with very few words - Good for launches, events, covers Ask what your brand is made of. A bakery is flour, paper and warm light, so Fiber or Wash. A studio selling software is glass and clean light, so Frosted or Prism. Then ask how often you will post on it: the more often, the calmer it should be. [How to choose the right Mark](https://gradiently.design/guide/pick-the-right-mark) walks through the rest of the decision, and the Market lets you filter by material directly. ## FAQ ### What is a gradient material? The structure a gradient's colours fill, such as a sheen, a glow, a weave or a stone. It decides whether the colour reads as silk, glass, paper or light. ### How many layers can a Mark have? Up to three: a base layer and up to two more on top, each with its own opacity and blend mode. ### What is the difference between silk and aurora? Silk is a directional sheen across fine threads. Aurora is curtains of light rising from a bright edge into a dark sky. ### Does grain make text harder to read? A little grain rarely does, and it hides banding. Marks also calm busy detail behind words, so text stays legible. ### Can I search the Market by material? Yes. The Market can be filtered by material, as well as colour, ground, mood and style, and searched with words like "blue silk".