Toggle Sidebar B
Light & dark mode D

Vignette

Darkens or tints the edges of the frame, drawing attention toward the center

Darkens or tints the edges of the frame, drawing attention toward the center

Props

PropTypeDefaultDescription
colorcolor#000000Color of the vignette at the edges
centerposition{"x":0.5,"y":0.5}Center of the clear area where the vignette begins
radiusrange0.5Distance from center where the vignette begins to fade in
falloffrange0.5Width of the transition zone from clear to full vignette
intensityrange1Strength of the vignette effect

Usage

vue
<Shader>
  <Vignette
    color="#000000"
    :radius="0.5"
    :intensity="1"
  >
    <Circle />
  </Vignette>
</Shader>