Color-Aware Drop Shadow

For my personal portfolio website I wanted to give my project icons a slight punch, but the regular drop shadow was looking muddy. I figured that by duplicating the image and applying a slight blur, you can create a very nice looking color-aware drop shadow. By adjusting the absolute positioning and blur size, you can tweak the effect to your liking.

The technique is simple: position a blurred copy of the image behind the original, slightly offset. The blur picks up the dominant colors from the image, creating a natural glow effect. For nicer looking effect make the blurred image slightly smaller in size and you can also play around with the opacity.

<div className="relative">
  {/* Main element */}
  <div className="relative z-10 drop-shadow-xl ..."></div>

  {/* Blurred copy for color shadow */}
  <div className="absolute inset-1 top-2 blur-sm opacity-80 ..."></div>
</div>