Overlay

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.

Anatomy

Here’s an overlay shown within a Graphic Promotion.

Styles

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

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

Direction

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

Strength

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

Examples