Shadows

💡

This section will not work in dark mode, as there are no shadows in dark mode.

Drop Shadow

This shadow is a filter parameter. The values represent:

Horizontal Position
Vertical Position
Blur
Color

.dropShadowElement {
    filter: 
    drop-shadow(4px 4px 8px hsl(0deg 0% 0% / 0.25));
    
    }

Box Shadow

The Box Shadow is its own parameter. The values represent the same elements as drop-shadow.

Horizontal Position
Vertical Position
Blur
Color

.boxShadowElement {
    box-shadow: 4px 4px 8px hsl(0deg 0% 0% / 0.25);
    
    }

Layering

Shadows have varying degrees of darkness and will be darker the closer the shadow is to an onject. Ambient light will enter a shadow and reduce its strength the further away from the object. Layer shadows allows us to mimmic this and make more realisic shadows.

.layeredShadow {
    box-shadow: 
    2px 4px 2px hsl(0deg 0% 0% / 0.075),
    6px 6px 4px hsl(0deg 0% 0% / 0.075),
    8px 8px 6px hsl(0deg 0% 0% / 0.05),
    10px 10px 10px hsl(0deg 0% 0% / 0.050),
    12px 16px 16px hsl(0deg 0% 0% / 0.040)
    
    }

Inset

Inset shadows give that foot print in the snow kind of look.

.insetShadow {
        box-shadow: inset 
        2px 2px 8px hsl(0deg 0% 0% / 0.33);
        background-color: hsla(0deg 0% 96%);
    }