Tutorial: 3 kinds of Flat Design Long Shadows

Submitted by Cailean on Sat, 02/25/2017 - 15:31

There are 3 kinds of Flat Design Long Shadows.

  1. simple and unrealistic (needs to be in a container as shadow doesn't fade)
  2. fading shadow which ends in a flat line (using blend with straight lines 1px apart, 2nd line opacity set to 0%)
  3. fading shadow which ends in the shape of the object casting the shadow  (using blend with "casting" objects 1px apart, 2nd objectopacity set to 0%)

In both 2. and 3., you overall opacity of the blend can be adjusted if it is too strong going from 100-0% (which is obviously true for the simple method 1.)