Skip to main content

vignette()v4.0.468

Part of the @remotion/effects package.

A vignette effect that darkens, colors, or fades out the edges of canvas-based components such as <Video>, <HtmlInCanvas> and <Solid>.

It respects the source alpha mask. Transparent regions stay transparent.

Preview​

Drag current effect onto a layer in the Studio

Example​

MyComp.tsx
import {Video} from '@remotion/media';
import {vignette} from '@remotion/effects/vignette';

export const MyComp: React.FC = () => {
  return (
    <>
      <Video
        src="https://remotion.media/video.mp4"
        effects={[
          vignette({
            amount: 0.75,
            radius: 0.55,
            feather: 0.35,
            center: [0.35, 0.5],
            color: '#000000',
          }),
        ]}
      />
    </>
  );
};

API​

Pass an object with the following properties. You can also call vignette() without arguments.

amount?​

Strength from 0 to 1. Defaults to 0.5.

  • 0 leaves the layer unchanged.
  • 1 applies the full vignette at the outer edges.

radius?​

Size of the unaffected center from 0 to 1. Defaults to 0.65.

Higher values move the vignette closer to the outer edge.

center?​

Center of the vignette in UV coordinates. Defaults to [0.5, 0.5].

Values below 0 or above 1 are allowed.

feather?​

Softness of the transition from 0 to 1. Defaults to 0.35.

Use 0 for a hard edge.

roundness?​

Shape from 0 to 1. Defaults to 1.

  • 0 makes the vignette more rectangular.
  • 1 makes the vignette elliptical.

color?​

The color blended into the edges when mode is 'color'. Defaults to '#000000'.

Accepts any CSS color string (for example '#000000', 'black', or 'rgba(0, 0, 0, 0.8)').

mode?​

How the vignette is applied. Defaults to 'color'.

  • 'color' composites color into the edges, including transparent areas.
  • 'alpha' fades the edges transparent instead of adding color.

disabled?​

When true, the effect is skipped. Defaults to false.

Requirements​

vignette() uses a WebGL2 backend. See Using WebGL and WebGPU during renders.

See also​