Angular adaptation of an effect by David Haz / reactbits.dev.
Import
import { WrBorderGlow } from 'ngwr/border-glow';Playground
Hover me
The border lights up where the cursor is.
<wr-border-glow
[borderRadius]="28"
[glowRadius]="40"
[coneSpread]="25"
[glowIntensity]="1"
[animated]="false"
>
…
</wr-border-glow>Customize
Border Radius (px)
Glow Radius (px)
Cone Spread (%)
Glow Intensity
Animated
Glow Color
API
| Name | Description | Type | Default |
|---|---|---|---|
backgroundColor | Card background fill. Unset, it uses the theme surface token. | string | null | null |
borderRadius | Corner radius in pixels. | number | 28 |
glowRadius | Halo extent in pixels — how far the outer glow reaches past the card edge. | number | 40 |
glowIntensity | Halo opacity multiplier (1 = full strength). | number | 1 |
coneSpread | Width of the lit cone as a percentage of the perimeter. | number | 25 |
edgeSensitivity | How sharply the halo fades as the cursor leaves the edge. Lower = wider falloff. | number | 30 |
fillOpacity | Strength of the soft-light interior fill near edges (0..1). | number | 0.5 |
glowColor | Halo colour as "H S L" (HSL parts, no commas). Unset, the theme decides: a deep amber on light surfaces, pale amber on dark. | string | null | null |
colors | Mesh-gradient palette for the visible border slice. Unset, the theme decides: deep tones on light, pastels on dark. | readonly string[] | null | null |
animated | Play a one-shot perimeter sweep on mount, then fade out. | boolean | false |
CSS variables
Custom properties ngwr/border-glow publishes. Each default below is declared on the component's own selector, so a :root override is shadowed by it — set them on that selector, on a wrapper you scope yourself, or inline on the element. Unlike the BEM class names, these are the supported way to restyle the component.
| Variable | Default | Declared on |
|---|---|---|
--wr-border-glow-angle | 45deg | .wr-border-glow |
--wr-border-glow-color | hsl(40deg 90% 45% / 100%) | .wr-border-glow +1 variant override |
--wr-border-glow-color-10 | hsl(40deg 90% 45% / 10%) | .wr-border-glow +1 variant override |
--wr-border-glow-color-20 | hsl(40deg 90% 45% / 20%) | .wr-border-glow +1 variant override |
--wr-border-glow-color-30 | hsl(40deg 90% 45% / 30%) | .wr-border-glow +1 variant override |
--wr-border-glow-color-40 | hsl(40deg 90% 45% / 40%) | .wr-border-glow +1 variant override |
--wr-border-glow-color-50 | hsl(40deg 90% 45% / 50%) | .wr-border-glow +1 variant override |
--wr-border-glow-color-60 | hsl(40deg 90% 45% / 60%) | .wr-border-glow +1 variant override |
--wr-border-glow-color-sensitivity | calc(var(--wr-border-glow-edge-sensitivity) + 20) | .wr-border-glow |
--wr-border-glow-cone-spread | 25 | .wr-border-glow |
--wr-border-glow-edge-proximity | 0 | .wr-border-glow |
--wr-border-glow-edge-sensitivity | 30 | .wr-border-glow |
--wr-border-glow-edge-shadow | inset 0 0 0 1px var(--wr-border-glow-color), inset 0 0 1px 0 var(--wr-border-glow-color-60), inset 0 0 3px 0 var(--wr-border-glow-color-50), inset 0 0 6px 0 var(--wr-border-glow-color-40), inset 0 0 15px 0 var(--wr-border-glow-color-30), inset 0 0 25px 2px var(--wr-border-glow-color-20), inset 0 0 50px 2px var(--wr-border-glow-color-10), 0 0 1px 0 var(--wr-border-glow-color-60), 0 0 3px 0 var(--wr-border-glow-color-50), 0 0 6px 0 var(--wr-border-glow-color-40), 0 0 15px 0 var(--wr-border-glow-color-30), 0 0 25px 2px var(--wr-border-glow-color-20), 0 0 50px 2px var(--wr-border-glow-color-10) only under [data-theme='dark'] .wr-border-glow — unset elsewhere | [data-theme='dark'] .wr-border-glow |
--wr-border-glow-fill-blend | soft-light only under [data-theme='dark'] .wr-border-glow — unset elsewhere | [data-theme='dark'] .wr-border-glow |
--wr-border-glow-fill-scale | 1 only under [data-theme='dark'] .wr-border-glow — unset elsewhere | [data-theme='dark'] .wr-border-glow |
--wr-border-glow-gradient-base | linear-gradient(hsl(262deg 70% 50%) 0 100%) | .wr-border-glow +1 variant override |
--wr-border-glow-gradient-five | radial-gradient(at 86% 85%, hsl(186deg 90% 38%) 0px, transparent 50%) | .wr-border-glow +1 variant override |
--wr-border-glow-gradient-four | radial-gradient(at 41% 38%, hsl(192deg 90% 40%) 0px, transparent 50%) | .wr-border-glow +1 variant override |
--wr-border-glow-gradient-one | radial-gradient(at 80% 55%, hsl(268deg 80% 50%) 0px, transparent 50%) | .wr-border-glow +1 variant override |
--wr-border-glow-gradient-seven | radial-gradient(at 51% 4%, hsl(12deg 90% 50%) 0px, transparent 50%) | .wr-border-glow +1 variant override |
--wr-border-glow-gradient-six | radial-gradient(at 82% 18%, hsl(40deg 95% 45%) 0px, transparent 50%) | .wr-border-glow +1 variant override |
--wr-border-glow-gradient-three | radial-gradient(at 8% 6%, hsl(136deg 70% 38%) 0px, transparent 50%) | .wr-border-glow +1 variant override |
--wr-border-glow-gradient-two | radial-gradient(at 69% 34%, hsl(349deg 85% 52%) 0px, transparent 50%) | .wr-border-glow +1 variant override |
--wr-border-glow-halo-blend | plus-lighter only under [data-theme='dark'] .wr-border-glow — unset elsewhere | [data-theme='dark'] .wr-border-glow |
--wr-border-glow-outline | rgb(255 255 255 / 15%) only under [data-theme='dark'] .wr-border-glow — unset elsewhere | [data-theme='dark'] .wr-border-glow |
--wr-border-glow-padding | 40px | .wr-border-glow |
--wr-border-glow-radius | 28px | .wr-border-glow |