Spotted a neat CSS trick at a coffee shop in Portland last weekend

I was grabbing a latte and noticed their menu board had this fancy gradient text effect. Looked like it was glowing from behind the letters. Turns out they used a simple mix of background-clip:text and a radial gradient with some offset shadows. No images at all, just pure CSS. The barista said it took like 12 lines of code total. Has anyone else tried this kind of glowing text trick for headers on their own projects?

2 comments

2 Comments

logansullivan18d ago

Oh man I used to hate on CSS-only effects but this actually sounds kinda sick, might have to steal this for my site's hero section lol.

kevin_murray8818d ago

That hero section idea with the layered parallax and the gradient mask, does it actually work across all major browsers or are we still talking about that one Chrome-only demo that breaks on Firefox? I keep seeing people post these slick CSS tricks and then you load the page in Safari and it's just a white void with a title.