Curved 3D Shadows

Curved 3D shadows are bending outwards, downwards at the sides, away from the item - what natural shadows do.

HTML effects typically curve inwards around the item. Blur can be used to show distancing.

You can simulate the outwards-bending curve by creating an angle. Attach blurred box-shadow or gradient pseudo-elements behind the items.

Problems with angles:

  • There are no real curves.
  • The distancing depends on the width of the item. There is no general solution that looks good.
  • The pseudo-elements continue behind the item. You can't use this technique for objects with transparency.


Use a background image of a shadow. A pseudo-element provides the positioning.

Problem with pseudo-elements:

They don't work with inline frames and images.

Solution: Wrap the items tightly and attach the pseudo-elements there.


The shadow shows earlier than the item while this is still loading. The problem gets worse if you use loading effects.


Load the shadow together with the item.

Better solution:

1der1 does all of this automatically. There is no programming required.

Watch the short video to see how it works.

See 3D shadows at a 1der1 website:

Disqus - Express Yourself