Gradient materials explained: silk, aurora, grain and the rest

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.

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; each family holds many more.

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, aurora gradients and 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 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.

.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;
}

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.

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

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 walks through the rest of the decision, and the Market lets you filter by material directly.