Tätä opasta ei ole vielä omalla kielelläsi, joten tässä se on englanniksi.
Lyhyesti
- A grainy gradient is a colour blend with a fine layer of random noise over it, so the surface looks textured rather than perfectly smooth.
- Grain hides banding, because random variation breaks up the visible steps between the limited shades a screen can show.
- Grain makes digital colour read as physical, recalling film, risograph print and matte paper.
- Grain should be felt more than seen: start subtle, check at full size, and add more only where the surface is large and calm.
- In CSS, the usual method is an SVG feTurbulence noise layer placed over the gradient with a blend mode and a low opacity.
Tällä sivulla
A grainy gradient is a gradient with a fine layer of random noise laid over it, so the colour has a visible texture instead of a perfectly smooth, digital surface. It became popular for a practical reason and a visual one: grain hides the stripes that smooth blends often show, and it makes colour on a screen look like something printed, filmed or painted. Done well, most people won't notice the grain at all. They will just think the colour looks better.
Why grain makes a gradient look better
There are three reasons, and they compound.
- It hides banding. Most images carry 256 shades per colour channel. A gentle blend across a large area has to step between them, and your eye picks out the steps as stripes. Random noise scatters pixels across neighbouring shades, so the edges between steps disappear. This is the same idea as dithering. See gradient banding.
- It adds tactility. Physical things are never perfectly smooth. Film has grain, paper has tooth and printed ink sits unevenly. A small amount of noise borrows those associations, so a flat digital blend starts to feel like a material.
- It survives compression better. Social platforms and messaging apps recompress images. Smooth blends are exactly what heavy compression flattens into blocks, and a fine grain gives the encoder detail to hold on to. Test your export, though: very strong compression can smear grain too.
On a Mark, grain is part of the recipe, rendered live together with the colour.
At a square size the Mark is rendered again for the format, so the grain stays fine instead of being scaled up.
How much grain to add
The most common mistake is too much. Heavy grain looks like a dirty lens or a low-light phone photo. The right amount depends on the size of the calm area, how dark the gradient is and where it will be seen. Treat the numbers below as starting points for a noise layer in the Overlay or Soft Light blend mode, then judge by eye at full size.
| Use | Starting opacity | Grain size |
|---|---|---|
| Interface backgrounds, behind body text | Around 5 to 10% | Fine |
| Social posts and hero sections | Around 10 to 20% | Fine to medium |
| Posters, album art, bold editorial looks | Around 20 to 35% | Medium to coarse |
| Dark gradients prone to banding | Enough to hide the steps, no more | Fine |
Where to put the grain
Grain does not have to be even. It looks most natural on large, calm areas of colour and on dark tones, where film grain is most visible in real life. Keep it lighter behind small text, because noise at the edges of letters makes them look soft. And keep your logo and type above the grain layer, not under it, so they stay crisp.
Avoid
- Grain so strong it reads as dirt or low light
- Grain over logos and small text
- A small grainy image scaled up, so the grain turns into blotches
- Coloured, rainbow-speckled noise on a calm palette
Do
- Grain you feel more than see
- Type and logos above the grain layer
- Grain rendered or tiled at the final size
- Monochrome noise blended into the colours below
How to add grain to a gradient in CSS
The lightest method is an SVG noise filter used as a background image. feTurbulence generates random noise, feColorMatrix removes its colour so it doesn't speckle, and a blend mode mixes it into the gradient below. Higher baseFrequency values make finer grain; stitchTiles makes the tile repeat without seams.
.grainy {
position: relative;
isolation: isolate;
background: linear-gradient(135deg, #1e1b4b 0%, #7c3aed 55%, #f472b6 100%);
}
.grainy::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
mix-blend-mode: overlay;
opacity: 0.18;
}z-index: -1 inside an isolated parent keeps the grain above the gradient but below any text.If you prefer an image, a small tiling noise image saved as PNG works the same way as the SVG. Keep it lossless: JPEG noise tiles pick up compression artefacts. For more patterns and texture tricks without images, see CSS noise texture.
How to add grain in design tools
- 1
Build the gradient first
Get the colours, stops and composition right on a clean layer. Grain can't rescue a muddy blend; see muddy gradients.
- 2
Add a separate noise layer
Use the tool's noise effect or a noise texture on its own layer above the gradient, so you can adjust it without touching the colour.
- 3
Make it monochrome
Desaturate the noise so it doesn't add coloured speckles, then set the layer to Overlay or Soft Light.
- 4
Lower the opacity until it disappears, then go back a little
The right amount is usually just above the point where you stop noticing it.
- 5
Export at the final size, lossless if you can
Scaling a grainy image up enlarges the grain into blotches. Export PNG at the exact size, or a high-quality JPEG for photos.
Grain in print
Grain designed for a phone screen can behave differently on paper. At 300 dpi, very fine noise may vanish entirely, and coarse noise can look like a printing fault. For posters and flyers, make the grain at print resolution and proof it on the real stock. Print gradients covers the rest of the process.
Grain is also one of several materials. Paper, glass and silk each change what a gradient says; gradient texture compares them. Every Mark carries its own grain setting alongside its colours and materials, so the balance is already set when you start designing.
Usein kysyttyä
What is a grainy gradient?
A grainy gradient is a colour blend with a fine layer of random noise over it, so it looks textured like film or print instead of perfectly smooth.
Does grain fix gradient banding?
Usually, yes. Random noise breaks up the hard edges between the limited shades a screen can show, so the stripes stop being visible.
How do I add grain to a gradient in CSS?
Layer an SVG feTurbulence noise image over the gradient, desaturate it, set mix-blend-mode: overlay and use a low opacity.
How much grain should I add?
Less than you think. Start low, check at 100% zoom on the target device, and stop just after the grain stops being obvious.
Why does my grain look blotchy?
The image was probably scaled up after the grain was added. Add grain at the final export size, or use a tiling noise texture.
Kirjoittanut Gradiently
Gradientlyn tiimi. Gradiently on Markien ympärille rakennettu suunnittelutyökalu: eläviä liukuvärejä, joiden ansiosta kaikki suunnittelemasi näyttää omaltasi.
Katso profiilimme
