1 / 1
Gradient Border with Two Backgrounds
This UI trick creates a vibrant gradient border around a card by layering two backgrounds: a solid fill clipped to the padding-box and a gradient clipped to the border-box. A transparent CSS border then allows the underlying gradient to show through, resulting in a crisp, scalable gradient outline. The effect can be instantly re-themed by animating a CSS hue variable.
animationcssvariablesgradientbackgroundborderdarkmode