Darkens or tints the frame edges to draw attention toward the center.
Also known as: VignetteEdge darkeningLens shading
Moves in browsers that support WebGPU
This device could not render the demo — showing a still
Code reflects the control values
React
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
import { Shader, ImageTexture, Vignette } from 'shaders/react'
export default function ShaderEffect() {
return (
<Shader style={{ width: '100%', height: 320 }} disableTelemetry>
<ImageTexture
objectFit="cover"
url="/samples/photo.jpg" />
<Vignette />
</Shader>
)
}
Vue
<!-- Renders only in browsers with WebGPU. -->
<!-- /samples/… are this site’s sample files — point them at your own image or video. -->
<script setup lang="ts">
import { Shader, ImageTexture, Vignette } from 'shaders/vue'
</script>
<template>
<Shader style="width: 100%; height: 320px" :disable-telemetry="true">
<ImageTexture
object-fit="cover"
url="/samples/photo.jpg"/>
<Vignette/>
</Shader>
</template>
Svelte
<!-- Renders only in browsers with WebGPU. -->
<!-- /samples/… are this site’s sample files — point them at your own image or video. -->
<script>
import { Shader, ImageTexture, Vignette } from 'shaders/svelte'
</script>
<Shader style="width: 100%; height: 320px" disableTelemetry>
<ImageTexture
objectFit="cover"
url="/samples/photo.jpg" />
<Vignette />
</Shader>
Solid
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
import { Shader, ImageTexture, Vignette } from 'shaders/solid'
export default function ShaderEffect() {
return (
<Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
<ImageTexture
objectFit="cover"
url="/samples/photo.jpg" />
<Vignette />
</Shader>
)
}
JavaScript
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
// expects <canvas id="canvas" style="width:100%;height:320px"></canvas> on the page
import { createShader } from 'shaders/js'
const shader = await createShader(document.getElementById("canvas"), {
components: [
{
type: 'ImageTexture',
props: {
objectFit: 'cover',
url: '/samples/photo.jpg',
},
},
{
type: 'Vignette',
}
]
}, { disableTelemetry: true })
Props · Vignette
Changes apply to the demo above and to the code tabs. Descriptions come from the library registry (MIT).
Name
Value
Default
Range / options
Description
colorColor
#000000
—
Color of the vignette at the edges
centerCenter
xy
{"x":0.5,"y":0.5}
x, y: 0 – 1
Center of the clear area where the vignette begins
radiusRadius
0.5
0 – 1.5 (step 0.01)
Distance from center where the vignette begins to fade in
falloffFalloff
0.5
0.01 – 1.5 (step 0.01)
Width of the transition zone from clear to full vignette
intensityIntensity
1
0 – 1 (step 0.01)
Strength of the vignette effect
Every component also takes blendMode · opacity · visible · maskSource/maskType · boundingBox · id
A soft shade settles over the photo corners, making the subject near the center catch the eye first. It recalls the darkening around the edge of a camera frame.
`center` defaults to {x: 0.5, y: 0.5} and moves the point around which the clear area is centered. `radius` defaults to 0.5 (range 0–1.5) and sets where the effect begins; `falloff` defaults to 0.5 (0.01–1.5) and controls the transition width. `intensity` defaults to 1 (0–1) and sets the strength, while `color` defaults to #000000 and changes the edge tint.
Place it over an image or video, and move `center` when the subject sits off-center. It can balance edge light from a glow or light leak, but a very small `radius` with high `intensity` can make the frame feel cramped.
When to use
Use it to emphasize a person or product in a photo, or quiet the edges of a video or poster. Avoid it around small edge UI or on maps and dashboards that need an even view across the whole frame.
