Skip to main content

linearGradient()v4.0.483

Part of the @remotion/effects package.

A two-stop linear gradient for canvas-based components such as <Solid>, <Video> and <HtmlInCanvas>.

Use it to fill a layer with a gradient. The effect replaces the source pixels.

Preview​

Drag current effect onto a layer in the Studio

Example​

MyComp.tsx
import {AbsoluteFill, Solid} from 'remotion';
import {linearGradient} from '@remotion/effects/linear-gradient';

export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <Solid
        width={1280}
        height={720}
        effects={[
          linearGradient({
            start: [0, 0.5],
            end: [1, 0.5],
            startColor: '#0b84f3',
            endColor: '#ff5c8a',
          }),
        ]}
      />
    </AbsoluteFill>
  );
};

API​

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

start?​

UV coordinate where startColor is reached. Defaults to [0, 0.5].

Pass a [number, number] tuple where [0, 0] is top-left and [1, 1] is bottom-right.

The accepted range in the visual editor is [-1, 2] for each coordinate. Values outside [0, 1] place the stop outside the visible area.

end?​

UV coordinate where endColor is reached. Defaults to [1, 0.5].

Pass a [number, number] tuple.

startColor?​

The color at start. Defaults to '#000000'.

Accepts any CSS color string.

endColor?​

The color at end. Defaults to '#ffffff'.

Accepts any CSS color string.

disabled?​

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

Behavior​

The color is interpolated between startColor and endColor along the start to end line.

Before start, the color is clamped to startColor. After end, the color is clamped to endColor.

Difference to linearGradientTint()​

linearGradient() draws a gradient layer. If the colors have lower opacity, layers behind the gradient become visible.

linearGradientTint() keeps the source pixels and blends their RGB values toward the gradient color. It respects the source alpha mask, so transparent source areas remain transparent.

Use linearGradient() to create a gradient fill. Use linearGradientTint() to colorize existing pixels.

Requirements​

linearGradient() uses a WebGL2 backend. During renders, enable WebGL via Config.setChromiumOpenGlRenderer('angle'). See Using WebGL during renders.

See also​