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
