# @vx/gradient

    npm install --save @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 put down a `<PinkBlue />`, it's putting a `<linearGradient/>` attribute 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`.

## Premades

vx comes with a couple pre-made gradients for you to use.

Gradients Available
`GradientDarkgreenGreen`
`GradientLightgreenGreen`
`GradientOrangeRed`
`GradientPinkBlue`
`GradientPinkRed`
`GradientPurpleOrange`
`GradientPurpleTeal`
`GradientSteelPurple`
`GradientTealBlue`

## Make your own!

You can make any linear gradient like so:

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

    <LinearGradient
      from='#a18cd1'
      to='#fbc2eb'
    />