Realistic shadows with depth and elevation 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
Post a Comment