Star
Chart primitives
Layouts & specialized
Interactions
SVG utilities
Data utilities
Umbrella package

@visx/gradient

Inspired by: https://dribbble.com/shots/3380672-Sketch-Gradients-Freebie

Example

import { AreaClosed } from '@visx/shape';
import { GradientPinkBlue } from '@visx/gradient';

const GradientArea = () => {
  return (
    <svg>
      <GradientPinkBlue id="gradient" />
      <AreaClosed fill="url('#gradient')" />
    </svg>
  );
};

The Definition Caveat

Like patterns, gradients are "defined." When you render <GradientPinkBlue />, it's rendering a <linearGradient/> element inside a <def> in the SVG.

It's often better to think of these as variable definitions rather than true DOM elements. When you use fill="url('#gradient')" you're referencing the gradient's id: gradient.

Make your own!

In addition to the preset linear gradients, you can make any linear or radial gradient like so:

import { LinearGradient, RadialGradient } from '@visx/gradient';

<LinearGradient from="#a18cd1" to="#fbc2eb" />;
<RadialGradient from="#a18cd1" to="#fbc2eb" />;

Installation

npm install --save @visx/gradient

Examples

Gradients
<Gradient.LinearGradient /> <Gradient.RadialGradient />
Pies & donuts
<Shape.Pie />
Chord
<Chord.Chord /> & <Chord.Ribbon />
AreaClosed
<Shape.AreaClosed />
Bars
<Shape.Bar />
Drag ii
<Drag.Drag />

APIs

#<LinearGradient />

# idstringrequired

Unique id for the gradient. Should be unique across all page elements.

# childrenReactNode

Override of linearGradient children.

# fromstring

Start color of gradient.

# fromOffsetReactText

Number or percent defining the where the 'from' starting color is placed along the gradient.

Default 0%

# fromOpacityReactText

Opacity of the 'from' starting color.

Default 1

# rotateReactText

Rotation to apply to gradient.

# tostring

End color of gradient.

# toOffsetReactText

Number or percent defining the where the 'to' ending color is placed along the gradient.

Default 100%

# toOpacityReactText

Opacity of the 'to' ending color.

Default 1

# transformstring

Transform to apply to linearGradient, overrides rotate.

# verticalboolean

(When no x or y values are passed), will orient the gradient vertically instead of horizontally.

Default true

# x1ReactText

The x coordinate of the starting point along which the linear gradient is drawn.

# x2ReactText

The x coordinate of the ending point along which the linear gradient is drawn.

# y1ReactText

The y coordinate of the starting point along which the linear gradient is drawn.

# y2ReactText

The y coordinate of the ending point along which the linear gradient is drawn.

#<RadialGradient />

# childrenReactNode

Override of linearGradient children.

# fromReactText

Start color of gradient.

# fromOffsetReactText

Number or percent defining the where the 'from' starting color is placed along the gradient.

Default 0%

# fromOpacityReactText

Opacity of the 'from' starting color.

Default 1

# idstring

Unique id for the gradient. Should be unique across all page elements.

# rotateReactText

Rotation to apply to gradient.

# toReactText

End color of gradient.

# toOffsetReactText

Number or percent defining the where the 'to' ending color is placed along the gradient.

Default 100%

# toOpacityReactText

Opacity of the 'to' ending color.

Default 1

# transformstring

Transform to apply to linearGradient, overrides rotate.

#<GradientDarkgreenGreen />

# idstringrequired

Unique id for the gradient. Should be unique across all page elements.

# childrenReactNode

Override of linearGradient children.

# fromstring

Start color of gradient.

Default #184E86

# fromOffsetReactText

Number or percent defining the where the 'from' starting color is placed along the gradient.

# fromOpacityReactText

Opacity of the 'from' starting color.

# rotateReactText

Rotation to apply to gradient.

# tostring

End color of gradient.

Default #57CA85

# toOffsetReactText

Number or percent defining the where the 'to' ending color is placed along the gradient.

# toOpacityReactText

Opacity of the 'to' ending color.

# transformstring

Transform to apply to linearGradient, overrides rotate.

# verticalboolean

(When no x or y values are passed), will orient the gradient vertically instead of horizontally.

# x1ReactText

The x coordinate of the starting point along which the linear gradient is drawn.

# x2ReactText

The x coordinate of the ending point along which the linear gradient is drawn.

# y1ReactText

The y coordinate of the starting point along which the linear gradient is drawn.

# y2ReactText

The y coordinate of the ending point along which the linear gradient is drawn.

#<GradientLightgreenGreen />

# idstringrequired

Unique id for the gradient. Should be unique across all page elements.

# childrenReactNode

Override of linearGradient children.

# fromstring

Start color of gradient.

Default #42E695

# fromOffsetReactText

Number or percent defining the where the 'from' starting color is placed along the gradient.

# fromOpacityReactText

Opacity of the 'from' starting color.

# rotateReactText

Rotation to apply to gradient.

# tostring

End color of gradient.

Default #3BB2B8

# toOffsetReactText

Number or percent defining the where the 'to' ending color is placed along the gradient.

# toOpacityReactText

Opacity of the 'to' ending color.

# transformstring

Transform to apply to linearGradient, overrides rotate.

# verticalboolean

(When no x or y values are passed), will orient the gradient vertically instead of horizontally.

# x1ReactText

The x coordinate of the starting point along which the linear gradient is drawn.

# x2ReactText

The x coordinate of the ending point along which the linear gradient is drawn.

# y1ReactText

The y coordinate of the starting point along which the linear gradient is drawn.

# y2ReactText

The y coordinate of the ending point along which the linear gradient is drawn.

#<GradientOrangeRed />

# idstringrequired

Unique id for the gradient. Should be unique across all page elements.

# childrenReactNode

Override of linearGradient children.

# fromstring

Start color of gradient.

Default #FCE38A

# fromOffsetReactText

Number or percent defining the where the 'from' starting color is placed along the gradient.

# fromOpacityReactText

Opacity of the 'from' starting color.

# rotateReactText

Rotation to apply to gradient.

# tostring

End color of gradient.

Default #F38181

# toOffsetReactText

Number or percent defining the where the 'to' ending color is placed along the gradient.

# toOpacityReactText

Opacity of the 'to' ending color.

# transformstring

Transform to apply to linearGradient, overrides rotate.

# verticalboolean

(When no x or y values are passed), will orient the gradient vertically instead of horizontally.

# x1ReactText

The x coordinate of the starting point along which the linear gradient is drawn.

# x2ReactText

The x coordinate of the ending point along which the linear gradient is drawn.

# y1ReactText

The y coordinate of the starting point along which the linear gradient is drawn.

# y2ReactText

The y coordinate of the ending point along which the linear gradient is drawn.

#<GradientPinkBlue />

# idstringrequired

Unique id for the gradient. Should be unique across all page elements.

# childrenReactNode

Override of linearGradient children.

# fromstring

Start color of gradient.

Default #F02FC2

# fromOffsetReactText

Number or percent defining the where the 'from' starting color is placed along the gradient.

# fromOpacityReactText

Opacity of the 'from' starting color.

# rotateReactText

Rotation to apply to gradient.

# tostring

End color of gradient.

Default #6094EA

# toOffsetReactText

Number or percent defining the where the 'to' ending color is placed along the gradient.

# toOpacityReactText

Opacity of the 'to' ending color.

# transformstring

Transform to apply to linearGradient, overrides rotate.

# verticalboolean

(When no x or y values are passed), will orient the gradient vertically instead of horizontally.

# x1ReactText

The x coordinate of the starting point along which the linear gradient is drawn.

# x2ReactText

The x coordinate of the ending point along which the linear gradient is drawn.

# y1ReactText

The y coordinate of the starting point along which the linear gradient is drawn.

# y2ReactText

The y coordinate of the ending point along which the linear gradient is drawn.

#<GradientPinkRed />

# idstringrequired

Unique id for the gradient. Should be unique across all page elements.

# childrenReactNode

Override of linearGradient children.

# fromstring

Start color of gradient.

Default #F54EA2

# fromOffsetReactText

Number or percent defining the where the 'from' starting color is placed along the gradient.

# fromOpacityReactText

Opacity of the 'from' starting color.

# rotateReactText

Rotation to apply to gradient.

# tostring

End color of gradient.

Default #FF7676

# toOffsetReactText

Number or percent defining the where the 'to' ending color is placed along the gradient.

# toOpacityReactText

Opacity of the 'to' ending color.

# transformstring

Transform to apply to linearGradient, overrides rotate.

# verticalboolean

(When no x or y values are passed), will orient the gradient vertically instead of horizontally.

# x1ReactText

The x coordinate of the starting point along which the linear gradient is drawn.

# x2ReactText

The x coordinate of the ending point along which the linear gradient is drawn.

# y1ReactText

The y coordinate of the starting point along which the linear gradient is drawn.

# y2ReactText

The y coordinate of the ending point along which the linear gradient is drawn.

#<GradientPurpleOrange />

# idstringrequired

Unique id for the gradient. Should be unique across all page elements.

# childrenReactNode

Override of linearGradient children.

# fromstring

Start color of gradient.

Default #7117EA

# fromOffsetReactText

Number or percent defining the where the 'from' starting color is placed along the gradient.

# fromOpacityReactText

Opacity of the 'from' starting color.

# rotateReactText

Rotation to apply to gradient.

# tostring

End color of gradient.

Default #EA6060

# toOffsetReactText

Number or percent defining the where the 'to' ending color is placed along the gradient.

# toOpacityReactText

Opacity of the 'to' ending color.

# transformstring

Transform to apply to linearGradient, overrides rotate.

# verticalboolean

(When no x or y values are passed), will orient the gradient vertically instead of horizontally.

# x1ReactText

The x coordinate of the starting point along which the linear gradient is drawn.

# x2ReactText

The x coordinate of the ending point along which the linear gradient is drawn.

# y1ReactText

The y coordinate of the starting point along which the linear gradient is drawn.

# y2ReactText

The y coordinate of the ending point along which the linear gradient is drawn.

#<GradientPurpleRed />

# idstringrequired

Unique id for the gradient. Should be unique across all page elements.

# childrenReactNode

Override of linearGradient children.

# fromstring

Start color of gradient.

Default #622774

# fromOffsetReactText

Number or percent defining the where the 'from' starting color is placed along the gradient.

# fromOpacityReactText

Opacity of the 'from' starting color.

# rotateReactText

Rotation to apply to gradient.

# tostring

End color of gradient.

Default #C53364

# toOffsetReactText

Number or percent defining the where the 'to' ending color is placed along the gradient.

# toOpacityReactText

Opacity of the 'to' ending color.

# transformstring

Transform to apply to linearGradient, overrides rotate.

# verticalboolean

(When no x or y values are passed), will orient the gradient vertically instead of horizontally.

# x1ReactText

The x coordinate of the starting point along which the linear gradient is drawn.

# x2ReactText

The x coordinate of the ending point along which the linear gradient is drawn.

# y1ReactText

The y coordinate of the starting point along which the linear gradient is drawn.

# y2ReactText

The y coordinate of the ending point along which the linear gradient is drawn.

#<GradientPurpleTeal />

# idstringrequired

Unique id for the gradient. Should be unique across all page elements.

# childrenReactNode

Override of linearGradient children.

# fromstring

Start color of gradient.

Default #5B247A

# fromOffsetReactText

Number or percent defining the where the 'from' starting color is placed along the gradient.

# fromOpacityReactText

Opacity of the 'from' starting color.

# rotateReactText

Rotation to apply to gradient.

# tostring

End color of gradient.

Default #1BCEDF

# toOffsetReactText

Number or percent defining the where the 'to' ending color is placed along the gradient.

# toOpacityReactText

Opacity of the 'to' ending color.

# transformstring

Transform to apply to linearGradient, overrides rotate.

# verticalboolean

(When no x or y values are passed), will orient the gradient vertically instead of horizontally.

# x1ReactText

The x coordinate of the starting point along which the linear gradient is drawn.

# x2ReactText

The x coordinate of the ending point along which the linear gradient is drawn.

# y1ReactText

The y coordinate of the starting point along which the linear gradient is drawn.

# y2ReactText

The y coordinate of the ending point along which the linear gradient is drawn.

#<GradientSteelPurple />

# idstringrequired

Unique id for the gradient. Should be unique across all page elements.

# childrenReactNode

Override of linearGradient children.

# fromstring

Start color of gradient.

Default #65799B

# fromOffsetReactText

Number or percent defining the where the 'from' starting color is placed along the gradient.

# fromOpacityReactText

Opacity of the 'from' starting color.

# rotateReactText

Rotation to apply to gradient.

# tostring

End color of gradient.

Default #5E2563

# toOffsetReactText

Number or percent defining the where the 'to' ending color is placed along the gradient.

# toOpacityReactText

Opacity of the 'to' ending color.

# transformstring

Transform to apply to linearGradient, overrides rotate.

# verticalboolean

(When no x or y values are passed), will orient the gradient vertically instead of horizontally.

# x1ReactText

The x coordinate of the starting point along which the linear gradient is drawn.

# x2ReactText

The x coordinate of the ending point along which the linear gradient is drawn.

# y1ReactText

The y coordinate of the starting point along which the linear gradient is drawn.

# y2ReactText

The y coordinate of the ending point along which the linear gradient is drawn.

#<GradientTealBlue />

# idstringrequired

Unique id for the gradient. Should be unique across all page elements.

# childrenReactNode

Override of linearGradient children.

# fromstring

Start color of gradient.

Default #17EAD9

# fromOffsetReactText

Number or percent defining the where the 'from' starting color is placed along the gradient.

# fromOpacityReactText

Opacity of the 'from' starting color.

# rotateReactText

Rotation to apply to gradient.

# tostring

End color of gradient.

Default #6078EA

# toOffsetReactText

Number or percent defining the where the 'to' ending color is placed along the gradient.

# toOpacityReactText

Opacity of the 'to' ending color.

# transformstring

Transform to apply to linearGradient, overrides rotate.

# verticalboolean

(When no x or y values are passed), will orient the gradient vertically instead of horizontally.

# x1ReactText

The x coordinate of the starting point along which the linear gradient is drawn.

# x2ReactText

The x coordinate of the ending point along which the linear gradient is drawn.

# y1ReactText

The y coordinate of the starting point along which the linear gradient is drawn.

# y2ReactText

The y coordinate of the ending point along which the linear gradient is drawn.

Exports