← DOCS
overlays

Vignette

Dark edges radial gradient overlay.

npx chaos add vignette

PREVIEW

VIGNETTE

USAGE

case 'glass-button': return ; case 'neon-glow': return ; case 'floating-button': return ;
import { Vignette } from '@oalacea/chaosui/overlays/vignette';

<Vignette />
<Vignette intensity={0.9} spread={0.3} />
<Vignette color="#1a0000" />

PROPS

PropTypeDefault
intensityVignette darkness
number0.8
colorVignette color
string"#000000"
spreadHow far effect extends
number0.5
positionPosition type
"fixed" | "absolute""fixed"