Colored Glowing Edge Card

Colored, Glowing Edges

Image Placeholder

This is somewhat different to the usual colored, glowing cards you may have seen before!

Building off my previous Codepen (Gradient Pulse), I wanted to create a card with glowing edges, and a subtle coloured border.

I'm using a mesh gradient background, which is masked with radial gradients to create the edge colors. Then it's masked again with a conic-gradient that follows the direction of the pointer. The glow increases in opacity as the pointer gets closer to the edge.

This effect feels a lot better in my opinion, than a simple radial-gradient mask that follows the pointer, as the glow is stuck to the edge more naturally.

Made by Simey