Realistic shadows with depth and elevation in CSS

In this post, I describe how to create realistic shadows with varying depths and elevation in CSS.
Realistic shadow in CSS

Low Depth Shadow in CSS

Personally, I find a subtle shadow with a low depth to be a nice alternative to using a border to surround an element.

This example shadow can be used to give the impression that an element is close to the page with low depth and elevation:

box-shadow: rgba(0, 0, 0, 50%) 0.5px 1px 1px;


Medium Depth Shadow in CSS

A medium depth shadow can be useful to indicate an element has been hovered over.

This example shadow can be used to give the impression that an element is further from the page with medium depth and elevation:

box-shadow: rgba(0, 0, 0, 38%) 4px 8px 8px;


High Depth Shadow in CSS

Longer shadows with more depth and elevation can be useful for popup windows.

This example shadow can be used to give the impression that an element is far from the page with high depth and elevation:

box-shadow: rgba(0, 0, 0, 25%) 8px 16px 16px;


Realistic Shadow in CSS

To create even more realistic shadows, you can apply multiple layers of drop-shadow within a filter style:

filter: drop-shadow(rgba(0, 0, 0, 0.15) 0.5px 1px 1px) drop-shadow(rgba(0, 0, 0, 0.15) 1px 2px 2px) drop-shadow(rgba(0, 0, 0, 0.15) 2px 4px 4px) drop-shadow(rgba(0, 0, 0, 0.15) 4px 8px 8px) drop-shadow(rgba(0, 0, 0, 0.15) 8px 16px 16px);


For more detailed information on designing shadows in CSS, check out this excellent post by Josh Comeau: https://www.joshwcomeau.com/css/designing-shadows/ and his shadow palette generator: https://www.joshwcomeau.com/shadow-palette/


Related Posts

- Textarea scrollbar hover change cursor in CSS

Remove border from details summary element in CSS

- Increase border width on hover without moving other content

Comments

Popular posts from this blog

LG TV This app will now restart to free up more memory

LG TV Clear All Browsing History Data

LG TV turn off Quick Start in settings