4min chapter

Frontend First cover image

React email previews and radial gradients

Frontend First

CHAPTER

CSS Tricks and Techniques

Use radio gradients and they also use mask mask images. The way the ever vault demo pulls it off is when you move your mouse cursor it actually looks like it's stretching an ellipse that has like a gradient and like some Transparency over it. When I first saw this I thought the implementation was gonna look something like Okay calculate the distance of the mouse cursor from the center of the card and then use that distance as Like the diameter on theEllipses shape. And so since that diameter changes, it should like stretch a circle. So once I spent a good deal of time with this demo You realize there's two layers and one is actually a fixed gradient that is always there.

00:00

Get the Snipd
podcast app

Unlock the knowledge in podcasts with the podcast player of the future.
App store bannerPlay store banner

AI-powered
podcast player

Listen to all your favourite podcasts with AI-powered features

Discover
highlights

Listen to the best highlights from the podcasts you love and dive into the full episode

Save any
moment

Hear something you like? Tap your headphones to save it with AI-generated key takeaways

Share
& Export

Send highlights to Twitter, WhatsApp or export them to Notion, Readwise & more

AI-powered
podcast player

Listen to all your favourite podcasts with AI-powered features

Discover
highlights

Listen to the best highlights from the podcasts you love and dive into the full episode