Unlock Advanced CSS Shadow Tricks: From Single‑Side to 3D Effects

Single‑Side Shadow

By setting only one offset in

box-shadow

you can create a shadow on a single side. Example:

<code>box-shadow: 1px 0 3px #333;</code>

Negative spread values and matching blur radius can hide the shadow unless an offset is applied.

Shadow Background / Background Animation

Multiple

box-shadow

layers can be animated, while

background‑image: linear‑gradient()

cannot be interpolated.

Example of using

box-shadow

to simulate a background image:

<code>.shadow { position: relative; width: 250px; height: 250px; }
.shadow::before { content: ""; position: absolute; top: -50px; left: -50px; width: 100%; height: 100%; box-shadow: 0 0 0 #000, 50px 50px #000; }</code>

3D (Stereoscopic) Shadow

Using pseudo‑elements, rotate and position them to create a 3‑D look. The key is to generate a sibling element with

transform

and apply a shadow.

<code>div { position: relative; width: 600px; height: 100px; background: hsl(48,100%,50%); border‑radius: 20px; }
div::before { content: ""; position: absolute; top: 50%; left: 5%; right: 5%; bottom: 0; background: hsl(48,100%,20%); transform: translate(0,-15%) rotate(-4deg); box-shadow: 0 0 20px 15px hsl(48,100%,20%); }</code>

Text Long Shadow

Stacking many

text-shadow

layers creates a long, progressive shadow. A SASS function can generate 50 layers automatically.

<code>@function makeLongShadow($color) { $val: 0px 0px $color; @for $i from 1 through 50 { $val: #{$val}, #{$i}px #{$i}px $color; } @return $val; }
.div { text-shadow: makeLongShadow(hsl(14,100%,30%)); }</code>

Colored Shadow

Although

box-shadow

and

text-shadow

are single‑color, a blurred

filter: blur()

on a duplicated element can simulate a gradient‑colored shadow.

<code>.avatar { position: relative; background: url($img) no‑repeat center; background-size: 100% 100%; }
.avatar::after { content: ""; position: absolute; top: 10%; width: 100%; height: 100%; background: inherit; filter: blur(10px) brightness(80%) opacity(.8); z-index: -1; }</code>

Neon and Light Effects

Multiple large

box-shadow

layers with bright colors produce a neon glow around text.

<code>.neon { color: #fff; text-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 20px #0ff, 0 0 40px #0ff; }</code>

Single‑Tag TikTok Logo

Combining a base

div

with two pseudo‑elements, using

filter: drop‑shadow()

for one side and

box-shadow

for the other, reproduces the TikTok logo shape.

<code>div { position: relative; width: 37px; height: 218px; background: #fff; filter: drop‑shadow(-10px -10px 0 #24f6f0) contrast(150%) brightness(110%); box‑shadow: 11.6px 10px 0 #fe2d52; }
/* pseudo‑elements create the curved parts */</code>

Update (2018‑11‑09)

The logo can also be built with two overlapping “J” shapes using

mix‑blend‑mode

for the correct color blending.

<code>.logo { mix‑blend‑mode: screen; /* ... */ }</code>

These techniques demonstrate how CSS shadows can be extended beyond simple depth cues to create complex visual effects without images or JavaScript.