Border Glow
A card with a lamp on its outline: the light slides to the point nearest the pointer and takes the colour of the edge it lands on.
HorizonX UI/UXTool collection
CSS Glow Effects & Neon Glow Components
Glow effect CSS references for borders, buttons and a prism checkbox, alongside the WebGL Glow Grid depth experiment. Use a glow to distinguish an active control or a featured surface. Keep the brightest accent near the action that matters rather than lighting every border equally.
- 6 components
- Edit live in the browser
- Export HTML, Svelte or React
- Read the guide
HorizonX UI/UX
What is inside
Glow effect CSS references for borders, buttons and a prism checkbox, alongside the WebGL Glow Grid depth experiment.
When to use it
Use a glow to distinguish an active control or a featured surface. Keep the brightest accent near the action that matters rather than lighting every border equally.
Customize and integrate
Adjust accent color and intensity against the actual background. Inspect the selected renderer and export options: Glow Grid is a WebGL treatment, not a CSS border effect.
Before publishing
Test label contrast separately from the glow and provide a visible focus outline. Avoid excessive animated light and remember that a glow alone may not communicate state.
Are all glow effects CSS?
No. The control treatments are CSS-tagged, while Glow Grid is tagged WebGL and depth.
Can glow replace a focus indicator?
Do not rely on a diffuse glow alone. Keep a clearly visible focus boundary and check it against the real surface colors.
Where is glow useful?
Use it for a deliberate accent, such as an active control or a highlighted panel. Too many bright surfaces flatten the visual hierarchy.
Keep exploring
Related collections
Tune it live, then export the code
Every interactive tool on HorizonX opens in an editor you can adjust in the browser before you export it.