@vx/gradient

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

Example

import { AreaClosed } from '@vx/shape';
import { GradientPinkBlue } from '@vx/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 '@vx/gradient';

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

Installation

npm install --save @vx/gradient

Examples

Components

APIs

#<LinearGradient />

# LinearGradient.idstringrequired

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

# LinearGradient.childrenReactNodeoptional

Override of linearGradient children.

# LinearGradient.fromstringoptional

Start color of gradient.

# LinearGradient.fromOffsetReactTextoptional

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

Default 0%

# LinearGradient.fromOpacityReactTextoptional

Opacity of the 'from' starting color.

Default 1

# LinearGradient.rotateReactTextoptional

Rotation to apply to gradient.

# LinearGradient.tostringoptional

End color of gradient.

# LinearGradient.toOffsetReactTextoptional

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

Default 100%

# LinearGradient.toOpacityReactTextoptional

Opacity of the 'to' ending color.

Default 1

# LinearGradient.transformstringoptional

Transform to apply to linearGradient, overrides rotate.

# LinearGradient.verticalbooleanoptional

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

Default true

# LinearGradient.x1ReactTextoptional

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

# LinearGradient.x2ReactTextoptional

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

# LinearGradient.y1ReactTextoptional

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

# LinearGradient.y2ReactTextoptional

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

#<RadialGradient />

# RadialGradient.childrenReactNodeoptional

Override of linearGradient children.

# RadialGradient.fromReactTextoptional

Start color of gradient.

# RadialGradient.fromOffsetReactTextoptional

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

Default 0%

# RadialGradient.fromOpacityReactTextoptional

Opacity of the 'from' starting color.

Default 1

# RadialGradient.idstringoptional

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

# RadialGradient.rotateReactTextoptional

Rotation to apply to gradient.

# RadialGradient.toReactTextoptional

End color of gradient.

# RadialGradient.toOffsetReactTextoptional

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

Default 100%

# RadialGradient.toOpacityReactTextoptional

Opacity of the 'to' ending color.

Default 1

# RadialGradient.transformstringoptional

Transform to apply to linearGradient, overrides rotate.

#<GradientDarkgreenGreen />

# GradientDarkgreenGreen.idstringrequired

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

# GradientDarkgreenGreen.childrenReactNodeoptional

Override of linearGradient children.

# GradientDarkgreenGreen.fromstringoptional

Start color of gradient.

Default #184E86

# GradientDarkgreenGreen.fromOffsetReactTextoptional

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

# GradientDarkgreenGreen.fromOpacityReactTextoptional

Opacity of the 'from' starting color.

# GradientDarkgreenGreen.rotateReactTextoptional

Rotation to apply to gradient.

# GradientDarkgreenGreen.tostringoptional

End color of gradient.

Default #57CA85

# GradientDarkgreenGreen.toOffsetReactTextoptional

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

# GradientDarkgreenGreen.toOpacityReactTextoptional

Opacity of the 'to' ending color.

# GradientDarkgreenGreen.transformstringoptional

Transform to apply to linearGradient, overrides rotate.

# GradientDarkgreenGreen.verticalbooleanoptional

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

# GradientDarkgreenGreen.x1ReactTextoptional

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

# GradientDarkgreenGreen.x2ReactTextoptional

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

# GradientDarkgreenGreen.y1ReactTextoptional

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

# GradientDarkgreenGreen.y2ReactTextoptional

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

#<GradientLightgreenGreen />

# GradientLightgreenGreen.idstringrequired

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

# GradientLightgreenGreen.childrenReactNodeoptional

Override of linearGradient children.

# GradientLightgreenGreen.fromstringoptional

Start color of gradient.

Default #42E695

# GradientLightgreenGreen.fromOffsetReactTextoptional

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

# GradientLightgreenGreen.fromOpacityReactTextoptional

Opacity of the 'from' starting color.

# GradientLightgreenGreen.rotateReactTextoptional

Rotation to apply to gradient.

# GradientLightgreenGreen.tostringoptional

End color of gradient.

Default #3BB2B8

# GradientLightgreenGreen.toOffsetReactTextoptional

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

# GradientLightgreenGreen.toOpacityReactTextoptional

Opacity of the 'to' ending color.

# GradientLightgreenGreen.transformstringoptional

Transform to apply to linearGradient, overrides rotate.

# GradientLightgreenGreen.verticalbooleanoptional

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

# GradientLightgreenGreen.x1ReactTextoptional

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

# GradientLightgreenGreen.x2ReactTextoptional

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

# GradientLightgreenGreen.y1ReactTextoptional

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

# GradientLightgreenGreen.y2ReactTextoptional

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

#<GradientOrangeRed />

# GradientOrangeRed.idstringrequired

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

# GradientOrangeRed.childrenReactNodeoptional

Override of linearGradient children.

# GradientOrangeRed.fromstringoptional

Start color of gradient.

Default #FCE38A

# GradientOrangeRed.fromOffsetReactTextoptional

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

# GradientOrangeRed.fromOpacityReactTextoptional

Opacity of the 'from' starting color.

# GradientOrangeRed.rotateReactTextoptional

Rotation to apply to gradient.

# GradientOrangeRed.tostringoptional

End color of gradient.

Default #F38181

# GradientOrangeRed.toOffsetReactTextoptional

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

# GradientOrangeRed.toOpacityReactTextoptional

Opacity of the 'to' ending color.

# GradientOrangeRed.transformstringoptional

Transform to apply to linearGradient, overrides rotate.

# GradientOrangeRed.verticalbooleanoptional

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

# GradientOrangeRed.x1ReactTextoptional

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

# GradientOrangeRed.x2ReactTextoptional

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

# GradientOrangeRed.y1ReactTextoptional

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

# GradientOrangeRed.y2ReactTextoptional

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

#<GradientPinkBlue />

# GradientPinkBlue.idstringrequired

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

# GradientPinkBlue.childrenReactNodeoptional

Override of linearGradient children.

# GradientPinkBlue.fromstringoptional

Start color of gradient.

Default #F02FC2

# GradientPinkBlue.fromOffsetReactTextoptional

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

# GradientPinkBlue.fromOpacityReactTextoptional

Opacity of the 'from' starting color.

# GradientPinkBlue.rotateReactTextoptional

Rotation to apply to gradient.

# GradientPinkBlue.tostringoptional

End color of gradient.

Default #6094EA

# GradientPinkBlue.toOffsetReactTextoptional

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

# GradientPinkBlue.toOpacityReactTextoptional

Opacity of the 'to' ending color.

# GradientPinkBlue.transformstringoptional

Transform to apply to linearGradient, overrides rotate.

# GradientPinkBlue.verticalbooleanoptional

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

# GradientPinkBlue.x1ReactTextoptional

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

# GradientPinkBlue.x2ReactTextoptional

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

# GradientPinkBlue.y1ReactTextoptional

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

# GradientPinkBlue.y2ReactTextoptional

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

#<GradientPinkRed />

# GradientPinkRed.idstringrequired

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

# GradientPinkRed.childrenReactNodeoptional

Override of linearGradient children.

# GradientPinkRed.fromstringoptional

Start color of gradient.

Default #F54EA2

# GradientPinkRed.fromOffsetReactTextoptional

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

# GradientPinkRed.fromOpacityReactTextoptional

Opacity of the 'from' starting color.

# GradientPinkRed.rotateReactTextoptional

Rotation to apply to gradient.

# GradientPinkRed.tostringoptional

End color of gradient.

Default #FF7676

# GradientPinkRed.toOffsetReactTextoptional

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

# GradientPinkRed.toOpacityReactTextoptional

Opacity of the 'to' ending color.

# GradientPinkRed.transformstringoptional

Transform to apply to linearGradient, overrides rotate.

# GradientPinkRed.verticalbooleanoptional

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

# GradientPinkRed.x1ReactTextoptional

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

# GradientPinkRed.x2ReactTextoptional

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

# GradientPinkRed.y1ReactTextoptional

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

# GradientPinkRed.y2ReactTextoptional

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

#<GradientPurpleOrange />

# GradientPurpleOrange.idstringrequired

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

# GradientPurpleOrange.childrenReactNodeoptional

Override of linearGradient children.

# GradientPurpleOrange.fromstringoptional

Start color of gradient.

Default #7117EA

# GradientPurpleOrange.fromOffsetReactTextoptional

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

# GradientPurpleOrange.fromOpacityReactTextoptional

Opacity of the 'from' starting color.

# GradientPurpleOrange.rotateReactTextoptional

Rotation to apply to gradient.

# GradientPurpleOrange.tostringoptional

End color of gradient.

Default #EA6060

# GradientPurpleOrange.toOffsetReactTextoptional

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

# GradientPurpleOrange.toOpacityReactTextoptional

Opacity of the 'to' ending color.

# GradientPurpleOrange.transformstringoptional

Transform to apply to linearGradient, overrides rotate.

# GradientPurpleOrange.verticalbooleanoptional

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

# GradientPurpleOrange.x1ReactTextoptional

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

# GradientPurpleOrange.x2ReactTextoptional

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

# GradientPurpleOrange.y1ReactTextoptional

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

# GradientPurpleOrange.y2ReactTextoptional

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

#<GradientPurpleRed />

# GradientPurpleRed.idstringrequired

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

# GradientPurpleRed.childrenReactNodeoptional

Override of linearGradient children.

# GradientPurpleRed.fromstringoptional

Start color of gradient.

Default #622774

# GradientPurpleRed.fromOffsetReactTextoptional

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

# GradientPurpleRed.fromOpacityReactTextoptional

Opacity of the 'from' starting color.

# GradientPurpleRed.rotateReactTextoptional

Rotation to apply to gradient.

# GradientPurpleRed.tostringoptional

End color of gradient.

Default #C53364

# GradientPurpleRed.toOffsetReactTextoptional

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

# GradientPurpleRed.toOpacityReactTextoptional

Opacity of the 'to' ending color.

# GradientPurpleRed.transformstringoptional

Transform to apply to linearGradient, overrides rotate.

# GradientPurpleRed.verticalbooleanoptional

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

# GradientPurpleRed.x1ReactTextoptional

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

# GradientPurpleRed.x2ReactTextoptional

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

# GradientPurpleRed.y1ReactTextoptional

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

# GradientPurpleRed.y2ReactTextoptional

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

#<GradientPurpleTeal />

# GradientPurpleTeal.idstringrequired

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

# GradientPurpleTeal.childrenReactNodeoptional

Override of linearGradient children.

# GradientPurpleTeal.fromstringoptional

Start color of gradient.

Default #5B247A

# GradientPurpleTeal.fromOffsetReactTextoptional

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

# GradientPurpleTeal.fromOpacityReactTextoptional

Opacity of the 'from' starting color.

# GradientPurpleTeal.rotateReactTextoptional

Rotation to apply to gradient.

# GradientPurpleTeal.tostringoptional

End color of gradient.

Default #1BCEDF

# GradientPurpleTeal.toOffsetReactTextoptional

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

# GradientPurpleTeal.toOpacityReactTextoptional

Opacity of the 'to' ending color.

# GradientPurpleTeal.transformstringoptional

Transform to apply to linearGradient, overrides rotate.

# GradientPurpleTeal.verticalbooleanoptional

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

# GradientPurpleTeal.x1ReactTextoptional

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

# GradientPurpleTeal.x2ReactTextoptional

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

# GradientPurpleTeal.y1ReactTextoptional

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

# GradientPurpleTeal.y2ReactTextoptional

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

#<GradientSteelPurple />

# GradientSteelPurple.idstringrequired

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

# GradientSteelPurple.childrenReactNodeoptional

Override of linearGradient children.

# GradientSteelPurple.fromstringoptional

Start color of gradient.

Default #65799B

# GradientSteelPurple.fromOffsetReactTextoptional

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

# GradientSteelPurple.fromOpacityReactTextoptional

Opacity of the 'from' starting color.

# GradientSteelPurple.rotateReactTextoptional

Rotation to apply to gradient.

# GradientSteelPurple.tostringoptional

End color of gradient.

Default #5E2563

# GradientSteelPurple.toOffsetReactTextoptional

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

# GradientSteelPurple.toOpacityReactTextoptional

Opacity of the 'to' ending color.

# GradientSteelPurple.transformstringoptional

Transform to apply to linearGradient, overrides rotate.

# GradientSteelPurple.verticalbooleanoptional

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

# GradientSteelPurple.x1ReactTextoptional

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

# GradientSteelPurple.x2ReactTextoptional

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

# GradientSteelPurple.y1ReactTextoptional

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

# GradientSteelPurple.y2ReactTextoptional

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

#<GradientTealBlue />

# GradientTealBlue.idstringrequired

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

# GradientTealBlue.childrenReactNodeoptional

Override of linearGradient children.

# GradientTealBlue.fromstringoptional

Start color of gradient.

Default #17EAD9

# GradientTealBlue.fromOffsetReactTextoptional

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

# GradientTealBlue.fromOpacityReactTextoptional

Opacity of the 'from' starting color.

# GradientTealBlue.rotateReactTextoptional

Rotation to apply to gradient.

# GradientTealBlue.tostringoptional

End color of gradient.

Default #6078EA

# GradientTealBlue.toOffsetReactTextoptional

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

# GradientTealBlue.toOpacityReactTextoptional

Opacity of the 'to' ending color.

# GradientTealBlue.transformstringoptional

Transform to apply to linearGradient, overrides rotate.

# GradientTealBlue.verticalbooleanoptional

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

# GradientTealBlue.x1ReactTextoptional

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

# GradientTealBlue.x2ReactTextoptional

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

# GradientTealBlue.y1ReactTextoptional

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

# GradientTealBlue.y2ReactTextoptional

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