Overlays are a semi-transparent layer between an image and text to make copy easier to read.

Our Overlay styles exist to be applied in both design and code and can be changed to make sure the overlay serves its purpose. This saves having to manually treat images before seeing them in the live product.


Here’s an overlay shown within a Graphic Promotion.

Overlays Lead Image


We have 16 Overlays, one for every type of image. See our Usage Guidelines for how to choose which one to use.

Overlays Styles

12 Gradients

Gradient Overlays start as a percentage of black and fade to 0%.

3 Solids

Overlays are also available as solids, this covers the entire image.

1 Vignette

Slightly darkens the edges of images. This draws the users eyes into the centre of the image.

Style options


We have 4 direction options – top, bottom, left, and right.


We have 3 strength options – low, medium and high.


Overlay Example 02