# Border Glow

> A card whose border glows where the pointer is.

Source: https://ngwr.dev/bits/border-glow  
Updated in v15

## Installation

Import the class, and `@use` the entry point in your global styles: without it the component renders unstyled.

```typescript
import { Component } from '@angular/core';
import { WrBorderGlow } from 'ngwr/bits/border-glow';

@Component({ imports: [WrBorderGlow] })
export class MyComponent {}
```

```scss
@use 'ngwr/bits/border-glow';
```

## Playground

```angular-html
<wr-border-glow
  [borderRadius]="28"
  [glowRadius]="40"
  [coneSpread]="25"
  [glowIntensity]="1"
  [animated]="false"
  [loop]="false"
>
  …
</wr-border-glow>
```

```angular-ts
import { Component } from '@angular/core';

import { WrBorderGlow } from 'ngwr/bits/border-glow';

/**
 * Playground
 */
@Component({
  selector: 'ngwr-the-angular-ui-library-for-signal-forms-playground-example',
  templateUrl: './ngwr-the-angular-ui-library-for-signal-forms-playground-example.html',
  imports: [WrBorderGlow],
})
export class NgwrTheAngularUiLibraryForSignalFormsPlaygroundExample {}
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `backgroundColor` | Card fill. Unset, it uses the theme surface. | `string \| null` | `null` |
| `borderRadius` | Corner radius in pixels. | `number` | `28` |
| `glowRadius` | How far the glow reaches past the edge, in px. | `number` | `40` |
| `glowIntensity` | Glow opacity multiplier. Does nothing without a `glowColor`. | `number` | `1` |
| `coneSpread` | Width of the lit part, as a % of the perimeter. | `number` | `25` |
| `edgeSensitivity` | How fast the glow fades away from the edge. Lower is wider. | `number` | `30` |
| `fillOpacity` | Strength of the inner fill near the edges, 0..1. | `number` | `0.5` |
| `glowColor` | Glow colour: any CSS colour, or `"H S L"` parts. Unset, it follows the theme. | `string \| null` | `null` |
| `colors` | Gradient colours of the lit border. Unset, they follow the theme. | `readonly string[] \| null` | `null` |
| `animated` | Sweep the border once on mount. | `boolean` | `false` |
| `loop` | Circle the border for ever, edge lit. Replaces `animated`; still under reduced motion. | `boolean` | `false` |
| `speed` | Seconds per lap while `loop` is on. | `number` | `6` |

## CSS variables

Set these on the component's selector or a wrapper, not on `:root`: the defaults are declared on `ngwr/bits/border-glow`'s own element.

| Variable | Default | Declared on |
| --- | --- | --- |
| `--wr-border-glow-angle` | `45deg` | `.wr-border-glow` |
| `--wr-border-glow-color` | `light-dark(hsl(40deg 90% 45% / 100%), hsl(40deg 80% 80% / 100%))` | `.wr-border-glow` |
| `--wr-border-glow-color-10` | `light-dark(hsl(40deg 90% 45% / 10%), hsl(40deg 80% 80% / 10%))` | `.wr-border-glow` |
| `--wr-border-glow-color-20` | `light-dark(hsl(40deg 90% 45% / 20%), hsl(40deg 80% 80% / 20%))` | `.wr-border-glow` |
| `--wr-border-glow-color-30` | `light-dark(hsl(40deg 90% 45% / 30%), hsl(40deg 80% 80% / 30%))` | `.wr-border-glow` |
| `--wr-border-glow-color-40` | `light-dark(hsl(40deg 90% 45% / 40%), hsl(40deg 80% 80% / 40%))` | `.wr-border-glow` |
| `--wr-border-glow-color-50` | `light-dark(hsl(40deg 90% 45% / 50%), hsl(40deg 80% 80% / 50%))` | `.wr-border-glow` |
| `--wr-border-glow-color-60` | `light-dark(hsl(40deg 90% 45% / 60%), hsl(40deg 80% 80% / 60%))` | `.wr-border-glow` |
| `--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 light-dark(transparent, var(--wr-border-glow-color-60)), inset 0 0 3px 0 light-dark(transparent, var(--wr-border-glow-color-50)), inset 0 0 6px 0 light-dark(transparent, var(--wr-border-glow-color-40)), inset 0 0 15px 0 light-dark(transparent, var(--wr-border-glow-color-30)), inset 0 0 25px 2px light-dark(transparent, var(--wr-border-glow-color-20)), inset 0 0 50px 2px light-dark(transparent, 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)` | `.wr-border-glow` |
| `--wr-border-glow-fill-blend` | `normal` | `.wr-border-glow` |
| `--wr-border-glow-fill-scale` | `0.25` | `.wr-border-glow` |
| `--wr-border-glow-gradient-base` | `linear-gradient(light-dark(hsl(262deg 70% 50%), #c299ff) 0 100%)` | `.wr-border-glow` |
| `--wr-border-glow-gradient-five` | `radial-gradient(at 86% 85%, light-dark(hsl(186deg 90% 38%), hsl(186deg 100% 74%)) 0px, transparent 50%)` | `.wr-border-glow` |
| `--wr-border-glow-gradient-four` | `radial-gradient(at 41% 38%, light-dark(hsl(192deg 90% 40%), hsl(192deg 100% 64%)) 0px, transparent 50%)` | `.wr-border-glow` |
| `--wr-border-glow-gradient-one` | `radial-gradient(at 80% 55%, light-dark(hsl(268deg 80% 50%), hsl(268deg 100% 76%)) 0px, transparent 50%)` | `.wr-border-glow` |
| `--wr-border-glow-gradient-seven` | `radial-gradient(at 51% 4%, light-dark(hsl(12deg 90% 50%), hsl(12deg 100% 72%)) 0px, transparent 50%)` | `.wr-border-glow` |
| `--wr-border-glow-gradient-six` | `radial-gradient(at 82% 18%, light-dark(hsl(40deg 95% 45%), hsl(52deg 100% 65%)) 0px, transparent 50%)` | `.wr-border-glow` |
| `--wr-border-glow-gradient-three` | `radial-gradient(at 8% 6%, light-dark(hsl(136deg 70% 38%), hsl(136deg 100% 78%)) 0px, transparent 50%)` | `.wr-border-glow` |
| `--wr-border-glow-gradient-two` | `radial-gradient(at 69% 34%, light-dark(hsl(349deg 85% 52%), hsl(349deg 100% 74%)) 0px, transparent 50%)` | `.wr-border-glow` |
| `--wr-border-glow-halo-blend` | `normal` | `.wr-border-glow` |
| `--wr-border-glow-outline` | `light-dark(var(--wr-border-base), rgb(255 255 255 / 15%))` | `.wr-border-glow` |
| `--wr-border-glow-padding` | `40px` | `.wr-border-glow` |
| `--wr-border-glow-radius` | `28px` | `.wr-border-glow` |

## See also

- [Spotlight Card](https://ngwr.dev/bits/spotlight-card) — A card with a soft highlight that follows the pointer.
- [Star Border](https://ngwr.dev/bits/star-border) — Light rays that run along the edges of a box.
- [Card](https://ngwr.dev/reference/components/card) — A surface that groups related content.
- [Tilt Card](https://ngwr.dev/bits/tilt-card) — A card that tilts in 3D toward the pointer.