3 steps to create CSS shadows that look great on any background.

In this tutorial, we'll create a great-looking CSS shadow by applying multiple effects to the box-shadow property.

To create shadows that look great on any background, we need:

1. Inner glow: an inset, light shadow that makes the object visible in dark mode.
2. Shadow ring: a 1px spread, 0px blur shadow with a lower opacity, that makes light objects visible on white backgrounds.
3. Multiple soft shadows: a series of soft shadows with progressively higher 'Y' and 'blur' values.

.component {
              /* inner glow 👇 */
  box-shadow: inset 0 0 0.5px 1px hsla(0, 0%,  
              100%, 0.075),
              /* shadow ring 👇 */
              0 0 0 1px hsla(0, 0%, 0%, 0.05),
              /* multiple soft shadows 👇 */
              0 0.3px 0.4px hsla(0, 0%, 0%, 0.02),
              0 0.9px 1.5px hsla(0, 0%, 0%, 0.045),
              0 3.5px 6px hsla(0, 0%, 0%, 0.09);
}

Live demo:

In the above example, we're setting the object (background) color lighter in dark mode to increase its 'elevation' and improve the appearance.