# @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!

You can make any linear gradient like so:

    import { LinearGradient } from '@vx/gradient';

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

## Installation

    npm install --save @vx/gradient

## Components

- GradientDarkgreenGreen
- GradientLightgreenGreen
- GradientOrangeRed
- GradientPinkBlue
- GradientPinkRed
- GradientPurpleOrange
- GradientPurpleRed
- GradientPurpleTeal
- GradientSteelPurple
- GradientTealBlue
- LinearGradient
- RadialGradient

## API

### <GradientDarkgreenGreen />

All props pass through to `<LinearGradient {...props} />`

# GradientDarkgreenGreen.from

Default | '#184E86'

# GradientDarkgreenGreen.to

Default | '#57CA85'

### <GradientLightgreenGreen />

All props pass through to `<LinearGradient {...props} />`

# GradientLightgreenGreen.from

Default | '#42E695'

# GradientLightgreenGreen.to

Default | '#3BB2B8'

### <GradientOrangeRed />

All props pass through to `<LinearGradient {...props} />`

# GradientOrangeRed.from

Default | '#FCE38A'

# GradientOrangeRed.to

Default | '#F38181'

### <GradientPinkBlue />

All props pass through to `<LinearGradient {...props} />`

# GradientPinkBlue.from

Default | '#F02FC2'

# GradientPinkBlue.to

Default | '#6094EA'

### <GradientPinkRed />

All props pass through to `<LinearGradient {...props} />`

# GradientPinkRed.from

Default | '#F54EA2'

# GradientPinkRed.to

Default | '#FF7676'

### <GradientPurpleOrange />

All props pass through to `<LinearGradient {...props} />`

# GradientPurpleOrange.from

Default | '#7117EA'

# GradientPurpleOrange.to

Default | '#EA6060'

### <GradientPurpleRed />

All props pass through to `<LinearGradient {...props} />`

# GradientPurpleRed.from

Default | '#622774'

# GradientPurpleRed.to

Default | '#C53364'

### <GradientPurpleTeal />

All props pass through to `<LinearGradient {...props} />`

# GradientPurpleTeal.from

Default | '#5B247A'

# GradientPurpleTeal.to

Default | '#1BCEDF'

### <GradientSteelPurple />

All props pass through to `<LinearGradient {...props} />`

# GradientSteelPurple.from

Default | '#65799B'

# GradientSteelPurple.to

Default | '#5E2563'

### <GradientTealBlue />

All props pass through to `<LinearGradient {...props} />`

# GradientTealBlue.from

Default | '#17EAD9'

# GradientTealBlue.to

Default | '#6078EA'

### <LinearGradient />

# LinearGradient.from<string>

# LinearGradient.fromOffset<string>

Default | '0%'

# LinearGradient.fromOpacity<number>

Default | 1

# LinearGradient.id<string> `required`

# LinearGradient.rotate<union(string|number)>

# LinearGradient.to<string>

# LinearGradient.toOffset<string>

Default | '100%'

# LinearGradient.toOpacity<number>

Default | 1

# LinearGradient.transform<string>

# LinearGradient.vertical

Default | true

# LinearGradient.x1<string>

# LinearGradient.y1<string>

# LinearGradient.y2<string>

### <RadialGradient />

# RadialGradient.from<string>

# RadialGradient.fromOffset<string>

Default | '0%'

# RadialGradient.fromOpacity<number>

Default | 1

# RadialGradient.id<string> `required`

# RadialGradient.rotate<union(string|number)>

# RadialGradient.to<string>

# RadialGradient.toOffset<string>

Default | '100%'

# RadialGradient.toOpacity<number>

Default | 1

# RadialGradient.transform<string>