Stop

The SVG <Stop /> element defines a color and its position to use on a gradient. This element is always a child of a <LinearGradient /> or <RadialGradient /> element

import { Svg, Defs, LinearGradient, Stop, Rect } from '@react-pdf/renderer';

const Ramp = () => (
  <Svg viewBox="0 0 120 60" width={240} height={120}>
    <Defs>
      <LinearGradient id="ramp" x1="0" y1="0" x2="1" y2="0">
        <Stop offset="0" stopColor="#e82200" />
        <Stop offset="0.5" stopColor="#c9c2b6" />
        <Stop offset="1" stopColor="#8d1602" />
      </LinearGradient>
    </Defs>
    <Rect x="8" y="14" width="104" height="32" rx="4" fill="url(#ramp)" />
  </Svg>
);

Show preview

Valid props

Prop name	Description	Type	Default
offset	Defines where the gradient stop is placed along the gradient vector.	String, Number	undefined
stopColor	Defines the color of the gradient stop. It can be used as a CSS property.	String	undefined
stopOpacity	Defines the opacity of the gradient stop. It can be used as a CSS property.	String, Number	1

Valid props

On this page