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

# Colors and effects

> Fills, gradients, borders, shadows and backgrounds for your overlays.

A little color and depth makes an overlay feel like part of your brand.

**Ask the Agent:** "Make the title card background a blue gradient." · "Add a soft shadow to the callout box."

## Do it yourself

### Add color

Select an element and click its color swatch in the top bar. For shapes, groups and whole overlays, click **Add BG** to give them a background.

![The color picker for a text color, with brand swatches at the top and the Solid, Linear, Radial, Multi and Image tabs](https://mintcdn.com/yarn/5d87hh-DSpIitaVH/images/color-picker.png?fit=max\&auto=format\&n=5d87hh-DSpIitaVH\&q=85\&s=8c3982fa7083499457ed4ddc0912dbaf)

| Tab | What it does |
| - | - |
| **Solid** | One flat color. |
| **Linear** / **Radial** | A gradient. Drag its handles on the canvas to change it. |
| **Multi** | A gradient that blends from several points. |
| **Image** | Fills with a picture. |
| **Shader** | An animated background. It's only offered for backgrounds. |

The swatches at the top are your brand colors. For a background or border, pick **None** to remove it.

### Add effects

Click **Show Detail Panel** in the top bar, then click **Add** next to an effect. For **Inner Shadow** and **Motion Blur**, first hover the top of the panel, click **See All** and scroll down.

| Effect | What it does |
| - | - |
| **Border** | Outlines the element. |
| **Shadow** | Adds a drop shadow. |
| **Inner Shadow** | Shades the inside edges. |
| **Blur** | Softens the element. |
| **Motion Blur** | Blurs the element as it moves, so animation looks smoother. |

### Project background

The small swatch in the header bar sets the background behind your whole video. It has the same tabs, including **Shader**.

**Related:** [Text](https://docs.yarn.so/overlays/text.md) · [Animation](https://docs.yarn.so/overlays/animation.md) · [Brand Kit](https://docs.yarn.so/workspace/brand-kit.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.