The short version
- Grain texture is a fine, random speckle laid over a design so that flat digital colour reads as film, paper or print.
- Grain helps in three ways: it hides banding in smooth blends, it ties photos and flat graphics together, and it gives clean shapes a physical surface.
- For most screen designs, grain should be just visible at full size and invisible from arm's length; if people notice it first, there is too much.
- Monochrome grain is the safe default; coloured grain looks more like real film but can shift a palette.
- Heavy JPEG compression smooths grain away, so export grainy stills as PNG or high quality JPEG and give grainy video a generous bitrate.
On this page
Grain texture is a fine layer of random noise placed over a design so that perfectly flat digital colour looks like it was printed, photographed on film or pressed into paper. It is subtle by design: at the right amount nobody names it, they simply feel that the image has a surface. Getting it right comes down to four settings: amount, size, colour and blend.
Why grain makes digital designs look better
Screens can show colour that no physical material can: perfectly even, perfectly clean. That cleanliness is what makes many digital designs feel cheap or unfinished. Grain puts back a little of the irregularity every real surface has. It also does three practical jobs.
- It hides banding. Smooth blends break into visible stripes on 8 bit screens. Random noise breaks up those edges so the eye reads a continuous fade. Gradient banding explains the cause.
- It unifies mixed elements. A photo has natural grain and a flat shape has none. One grain layer over both makes them look like they belong to the same picture.
- It adds a surface. Flat colour reads as a screen; colour with grain reads as a material. That is why grain sits at the heart of most background texture choices.
A warm, softly textured background reads as a crafted object, which suits a product made by hand.
The same feeling carries a plain fact. Grain keeps a large number from looking like a spreadsheet.
How much grain to add
The honest test is distance. View the design at 100 percent: you should just see the grain. Then look at it on your phone held at arm's length: you should not. If grain is the first thing someone notices, halve it. Different jobs suit different amounts.
Amount
Grain size
Why
Amount
Grain size
Why
Amount
Grain size
Why
Amount
Grain size
Why
Amount
Grain size
Why
Monochrome or colour grain
Real film grain is coloured: tiny specks of red, green and blue that vary from frame to frame. Digital monochrome grain is only light and dark. Both have a place.
Monochrome grain
- Keeps your palette exactly as chosen
- Reads as print, paper or risograph
- Safe for brand colours and logos
- The right default for most work
Colour grain
- Looks like analogue film
- Adds life to photos and skin tones
- Can shift a flat brand colour slightly
- Best for photographic, nostalgic styles
Grain size matters as much as colour. Fine grain feels expensive and modern. Coarse grain feels handmade, rough and loud. Scale the grain to the output: a 1080×1350 post needs finer grain than an A3 poster at 3508×4961, because the poster is seen from further away.
How to add grain texture in any design tool
- 1
Make a noise layer
Fill a new layer with mid grey (
#808080) and add noise. In most editors this is a filter called Add Noise, Noise or Grain. Choose Gaussian and monochromatic for a clean start. - 2
Set the blend mode
Change the layer to Overlay or Soft Light. The grey disappears and only the speckle remains, lightening and darkening the colours beneath.
- 3
Lower the opacity
Bring it down to the amount in the table above. Check at 100 percent zoom and again on your phone.
- 4
Keep it on top
Grain belongs above the background and photos. Leave small type and logos above the grain if you want them crisp, or below it for a printed feel.
- 5
Export carefully
Export PNG or high quality JPEG. Heavy compression smears grain into blotches, which looks worse than no grain at all.
If you are adding grain to a colour blend specifically, grainy gradients has the settings for that, and noise gradients has ready recipes.
Grain texture on the web
On a website you don't need an image file for grain. An inline SVG with the feTurbulence filter draws noise in the browser at any size, so it stays sharp on every screen and weighs almost nothing.
<svg class="grain" aria-hidden="true">
<filter id="grain">
<feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch" />
<feColorMatrix type="saturate" values="0" />
</filter>
<rect width="100%" height="100%" filter="url(#grain)" />
</svg>
<style>
.grain {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
mix-blend-mode: overlay;
opacity: 0.06;
}
</style>baseFrequency for finer grain, lower it for coarser grain. Remove the colour matrix for coloured noise.Keep the opacity low: a full page of grain is a large area, and 6 percent is often plenty. The MDN reference for feTurbulence lists every setting.
Grain in video and motion
On moving footage, grain should move too. A single still grain layer over video looks like a dirty lens. Use animated grain that changes every frame, keep it fine, and export with a generous bitrate, because video compression treats grain as detail to throw away. For loops, read seamless loop video before you add texture.
Gradiently builds grain into every Mark as part of its recipe, alongside colour, material, light and motion, so the texture renders fresh at every size you design in rather than being stretched from one image. If you want a background that already has its surface, browse the Market and design with any unclaimed Mark.
Questions people ask
What is grain texture in design?
A fine, random speckle of light and dark laid over a design so flat digital colour looks like film, paper or print.
How much grain should I add to an image?
Enough to see at 100 percent zoom and not from arm's length. For social posts, a noise layer at roughly 6 to 12 percent opacity in Overlay is a good start.
Does grain fix gradient banding?
Usually, yes. Random noise breaks up the hard edges between bands so the eye reads a smooth fade.
Why does my grain disappear after uploading?
Platforms recompress images and treat fine grain as detail to discard. Use slightly more grain, export PNG or high quality JPEG, and upload at the platform's exact size.
Should film grain be coloured or black and white?
Monochrome grain keeps brand colours exact and suits most work. Coloured grain looks more like analogue film and suits photographic styles.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile