Last reviewed: 20 April 2021


Drop shadows

A drop shadow adds a shadow effect to an element or component.

This emphasises components or areas of the page by making it look like they are raised above the objects behind it.


Elements and components in the design system come with the correct drop shadow applied.

If you want to use drop shadow in a new component, use the values in this table:

Shadow Offset-x Offset-y Blur Spread Colour Opacity
Default 0px 2px 10px 0px #000000 0.15%
Hover 0px 2px 10px 0px #000000 0.25%

If an element or component with drop shadow applied links to somewhere else, use the hover values to emphasise that it is clickable. You should also apply other visual cues such as text underline on hover.


A signpost with the default drop shadow applied.

Changelog for this page

Date Notes
14 April 2021 First version of page published

Get support

Ask us about anything that’s featured on the Experience Library, or any questions about design, content or development.


Co-op Experience Library

Get email updates

Find out about the latest content, changes or developments to the Experience Library.

Sign up

Copyright © Co-operative Group Limited. All rights reserved.