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: box-shadow: 1px 0 3px #333; 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:

.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; }

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.

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%); }

Text Long Shadow

Stacking many text-shadow layers creates a long, progressive shadow. A SASS function can generate 50 layers automatically.

@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%)); }

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.

.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; }

Neon and Light Effects

Multiple large box-shadow layers with bright colors produce a neon glow around text.

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

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.

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 */

Update (2018‑11‑09)

The logo can also be built with two overlapping “J” shapes using mix‑blend‑mode for the correct color blending. .logo { mix‑blend‑mode: screen; /* ... */ } These techniques demonstrate how CSS shadows can be extended beyond simple depth cues to create complex visual effects without images or JavaScript.