← All elements
<div class="gf"><div>Glow frame</div></div>About this border
A card framed by a static rainbow gradient with a blurred copy behind it for a glow effect.
How it works
A three-pixel padding on a gradient wrapper exposes the gradient as a border around a dark inner box. A pseudo-element copy of the gradient is blurred and placed behind to make the glow.
Ways to customise it
- Change the gradient colours.
- Raise 18px for a softer glow.
- Use it around an image or form.
Good to know
The border is purely decorative. Check the text contrast inside against the dark inner background.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.