Go to homepage

Projects /

November 23, 2022

Beautiful CSS Shadows

By CodyHouse
404 HTML, CSS, JS components. Download →

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. 

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.