CSS LabChoosing one
For cards and panels on a light page, start with Soft card or Layered. For inputs, use Pressed in. For keyboard focus, the Ring is better than a glow because it stays visible on any background. The Neumorphic example only works on a light grey page of the matching colour, and has low contrast, so avoid it for anything that must be easy to see.
Each shadow was checked in current Chrome and WebKit on 13 November 2026. Open the box-shadow generator to adjust the numbers, and read the guide to know what each one does.
This is an independent site. It is not connected with the W3C, MDN, Google, Apple, Mozilla or Microsoft. Browser and product names belong to their owners.