Glow

Tri-color radial gradient backdrop. Drop it as a sibling at the top of a positioned container — it fills the parent (or the viewport with fixed) and content layered above shows the gradient through any transparent surfaces.

Hero backdrop

Tri-color radial blobs.

Drop a <Glow> as the first child of any positioned container and layer the real content on top. Tune x, y, colors, and base.

Usage

import { Glow } from '@bwo-ui/react';

<div style={{ position: 'relative', minHeight: 400 }}>
  <Glow x="90%" y="10%" />
  <main>{/* content sits on top */}</main>
</div>

Props

Prop	Type	Default	Description
`colors`	`[string, string, string]`	`[blue.15, yellow.12, red.10]`	Three colour stops.
`x`	`string`	`'90%'`	Gradient center, horizontal.
`y`	`string`	`'10%'`	Gradient center, vertical.
`base`	`string`	`var(--bwo-bg)`	Base color below the gradient.
`fixed`	`boolean`	`false`	Pin to viewport instead of parent.