Underglow

How to use it

Add a coloured shape, with blur and transparency applied, which peaks out from the bottom of a container or other element.

When to use it

This is similar to a coloured drop-shadow, but the shape and style makes it look more like light comes from underneath the element. Use it if you want to show off some strong brand/style colours, but mainly for visual interest.

What to watch out for

This is fiddly to create in design software, and probably even more so in CSS. It’s hard to get the shape right so that it doesn’t just feel like a shadow. The key seems to be to make sure the colour doesn't reach the corners of the bottom edge of the container. I used two ellipses overlaid, with their own transparency and layer blur effects.

Examples