Long shadows are a thing these days. Yes, you “They’re so lame” pedantic hipster designer, they are.

Anyway, Google’s Material Design and its iconography has meant long shadow design has made its way into many people’s eyes even without them knowing it.

Recently I found a need to try and experiment with long shadows for a digital design concept. But all the “long shadow generators” out there made you pick a solid background color, over which the shadow would essentially “fade” to that background color. Not cool!

What if you want your super cool long shadow to appear on a gradient? Or some texture? Yeah, exactly – it fails.

So here’s my CSS3 RGBA Long Shadow Generator 5000 (yeah, rolls off the tongue…but it’s patent-pending, so don’t even try to steal that).