Go to homepage

Projects /

November 23, 2022

Beautiful CSS Shadows

By CodyHouse
400 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. 

Level up your CSS skills

Each month we email a 1-minute CSS tutorial to 20K developers

Awesome! We just sent you a confirmation link by email

Error - please try again or contact us

Your email address is already subscribed

Project duplicated

Project created

Globals imported

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