Long Shadow

3D & Depth · Static · pure CSS

A flat, fading long shadow cast at any angle from a trail of offset text-shadow layers. The clean flat-design depth cue.

Open in the generator →All effects
Long Shadow

CSS

/* Long Shadow — generated with TEXT-FX
 * HTML: just put the class on any element.
 * Font: 'Space Mono', monospace (load from Google Fonts).
 */

.text-effect {
  font-family: 'Space Mono', monospace;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: none;
}

.text-effect {
  color: hsl(254 85% 62%);
  text-shadow:
    -0.71px -0.71px 0 hsl(254 40% 22%),
    -1.41px -1.41px 0 hsl(254 40% 22%),
    -2.12px -2.12px 0 hsl(254 40% 22%),
    -2.83px -2.83px 0 hsl(254 40% 22%),
    -3.54px -3.54px 0 hsl(254 40% 22%),
    -4.24px -4.24px 0 hsl(254 40% 22%),
    -4.95px -4.95px 0 hsl(254 40% 22%),
    -5.66px -5.66px 0 hsl(254 40% 22%),
    -6.36px -6.36px 0 hsl(254 40% 22%),
    -7.07px -7.07px 0 hsl(254 40% 22%),
    -7.78px -7.78px 0 hsl(254 40% 22%),
    -8.49px -8.49px 0 hsl(254 40% 22%),
    -9.19px -9.19px 0 hsl(254 40% 22%),
    -9.9px -9.9px 0 hsl(254 40% 22%),
    -10.61px -10.61px 0 hsl(254 40% 22%),
    -11.31px -11.31px 0 hsl(254 40% 22%),
    -12.02px -12.02px 0 hsl(254 40% 22%),
    -12.73px -12.73px 0 hsl(254 40% 22%),
    -13.44px -13.44px 0 hsl(254 40% 22%),
    -14.14px -14.14px 0 hsl(254 40% 22%),
    -14.85px -14.85px 0 hsl(254 40% 22%),
    -15.56px -15.56px 0 hsl(254 40% 22%),
    -16.26px -16.26px 0 hsl(254 40% 22%),
    -16.97px -16.97px 0 hsl(254 40% 22%),
    -17.68px -17.68px 0 hsl(254 40% 22%),
    -18.38px -18.38px 0 hsl(254 40% 22%),
    -19.09px -19.09px 0 hsl(254 40% 22%),
    -19.8px -19.8px 0 hsl(254 40% 22%),
    -20.51px -20.51px 0 hsl(254 40% 22%),
    -21.21px -21.21px 0 hsl(254 40% 22%),
    -21.92px -21.92px 0 hsl(254 40% 22%);
}

Pure CSS — just add the .text-effect class to any element.

Category
3D & Depth
Type
Static
Browser support
All modern browsers
Capabilities
pure

Related 3D & Depth effects