← DOCS
overlays

VignetteOverlay

Radial gradient overlay for darkened edges with feathering control.

npx chaos add vignette-overlay

PREVIEW

VIGNETTE

USAGE

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

<VignetteOverlay />
<VignetteOverlay intensity={0.8} size={50} />
<VignetteOverlay color="#1a0000" feather={50} />

PROPS

PropTypeDefault
intensityDarkness intensity at edges (0-1)
number0.5
sizeClear area size percentage
number70
colorVignette color
string"#000000"
featherSoft edge feathering percentage
number30
positionPosition type
"fixed" | "absolute""fixed"