Shadow Rising

By Keith Senkowski
On November 11, 2015

Drop shadows are a crime that modern design will never, ever live down. Unfortunately for developers we have to create these stupid things in CSS. God have mercy on your souls my friends.

The good news is we can create these damn things with math. If we open up the fx dialogue to get the values for the drop shadow we can use the following formulas to calculate it.

Horizontal Shadow = cos(angle) * distance
Vertical Shadow = sin(angle) * distance
Spread = size * (spread / 100)
Blur = size - spread
box-shadow = h-shadow v-shadow blur spread color
text-shadow: h-shadow v-shadow blur color

Photoshop Dialog Box

This is where you can find the shadow values in the Photoshop fx dialogue.