> ## Documentation Index
> Fetch the complete documentation index at: https://rive.app/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Vector Feathering

> Soften the edges of fills and strokes to create glows, drop shadows, inner shadows, and soft shapes.

Vector Feathering softens the edge of a fill or stroke, so it fades out gradually instead of ending in a hard line. Use it for glows, drop shadows, inner shadows, soft light, and any shape that needs a blurred edge.

Rive invented Vector Feathering. It softens the vector path itself instead of blurring rendered pixels, which avoids the heavy cost of a traditional Gaussian blur and keeps the edge crisp at any size. To learn how it works and why it's so much faster, read [How Rive reinvented feathering for the vectorian era](https://rive.app/blog/how-rive-reinvented-feathering-for-the-vectorian-era?utm_source=docs\&utm_medium=content).

> [!NOTE]
>
> Vector Feathering requires the Rive Renderer. Runtimes or packages that draw with another renderer, such as the web runtime's Canvas2D packages, don't support it. See [Choosing a Renderer](https://rive.app/docs/runtimes/choose-a-renderer/overview.md).

## Adding a feather

You can feather any fill or stroke.

**Step 1**

Select the shape.

**Step 2**

In the Inspector, click the feather icon on the fill or stroke you want to soften. You can also turn on **Feather** in the fill or stroke options.

![Turning on Vector Feathering with the feather icon on a fill, or the Feather toggle in the fill options](https://mintcdn.com/rive/07rt4FDXzuE1dMIv/images/editor/feathering/enable-feather.gif?s=01ab9fcc7377eab52cb1b212e4e2067b)

**Step 3**

Open the fill or stroke options to adjust the feather.

To remove a feather, click the feather icon again. Rive keeps the feather's settings, so turning it back on restores them.

> [!WARNING]
>
> Feathering a fill switches it to Rive's Clockwise fill rule, and you can't change the fill rule while the feather is on. Self-intersecting paths can look different with this fill rule than they did in your original design.

## Feather options

### Direction

Only fills have a direction.

* **Outer** feathers outward from the edge of the path, like a glow or a shadow. This is the default.
* **Inner** feathers inward from the edge, like an inner shadow or a vignette.

![Switching the feather Direction between Outer and Inner](https://mintcdn.com/rive/07rt4FDXzuE1dMIv/images/editor/feathering/feather-direction.gif?s=a4116c305dc582ce809cb25e505fde21)

### Amount

How soft the edge is. Higher values spread the feather over a wider area. The default is 12.

![Increasing and decreasing the feather Amount](https://mintcdn.com/rive/07rt4FDXzuE1dMIv/images/editor/feathering/feather-amount.gif?s=db8d3731e0cb3c9486aa6af8ab01e295)

### Offset

Moves the feather away from the path by an **X** and **Y** distance. Use it to cast a shadow below or to the side of a shape.

### Space

Sets which transform the offset follows.

* **World** keeps the offset pointing the same way, even if the shape or its parents rotate or scale. Use it for drop shadows that should stay consistent with a single light source. This is the default.
* **Local** moves the offset with the shape, so it rotates and scales along with it.

![Setting the feather Space to World or Local](https://mintcdn.com/rive/07rt4FDXzuE1dMIv/images/editor/feathering/feather-space.gif?s=afb9210867e98579e713d542cd973207)

**Direction**, **Amount**, and **Offset** can all be keyed on a timeline or [bound to data](https://rive.app/docs/editor/data-binding/overview.md).

## Examples

### Glow

**Step 1**

Add a second fill or stroke to the shape and give it a bright color.

**Step 2**

Move it behind the original fill or stroke.

**Step 3**

Turn on its feather and raise the **Amount** until the glow is as wide as you want.

### Drop shadow

**Step 1**

Add a second fill to the shape, give it a dark, semi-transparent color, and move it behind the original fill.

**Step 2**

Turn on its feather and set an **Amount**.

**Step 3**

Set the **Offset** to move the shadow, for example a few units down and to the right.

**Step 4**

Keep **Space** set to **World** so the shadow stays in the same direction as the shape rotates.

### Inner shadow

Add a second fill above the original fill, give it a dark color, then turn on its feather and set **Direction** to **Inner**. Add an **Offset** to push the shadow toward one edge.