Pro tip: I spent years stacking CSS gradients on top of each other like a madman

Was working on a hero section with like 6 layers of gradients for a client project last month. Text was always getting lost. Had a moment around 2am where I realized I could just use pseudo elements and mix blend modes instead. Cut my code by half and it actually looked better. Anyone else have that lightbulb moment where you found out you were overcomplicating something for no reason?

2 comments

2 Comments

miles_jackson95d ago

The 2am gradient struggle is real man, I've been there more times than I care to admit lol. I remember one project where I had like 8 stacked gradients on a pricing table and the text just turned into this weird blurry mess. Spent a whole weekend trying to fix it before someone on a forum told me about mix blend modes. It honestly felt like cheating when I first tried it. Made me feel dumb for all those hours I wasted before lol. Glad you found a cleaner way though, that feeling of cutting your code in half is the best.

gavinwood5d ago

Whoa hold on, eight stacked gradients on ONE pricing table? I thought I was bad with code but that's another level of madness. You must have been clicking through layers in dev tools like you were lost in a maze