Last reviewed: 20 April 2021

Foundations

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.

Guidelines

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.

Example

A signpost with the default drop shadow applied.

Changelog for this page

Date Notes
14 April 2021 First version of page published

Get support

Co-op Digital colleagues can get support in our dedicated Slack channel:

#experience-library-support

Sign up for email updates

Get updates about changes and developments.

Sign up

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