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

# Shaders

> Add rich, animated backgrounds and effects from Wonder's shader library

![A grid of Wonder shader presets on a dark background: gradients, warps, halftone dots, grain, and metaball effects.](https://mintcdn.com/wonder-0722b0f6/txvZZNRKXPPmeY_S/images/shaders/cover.webp?fit=max\&auto=format\&n=txvZZNRKXPPmeY_S\&q=85\&s=fda62a2ebc8d5048cbf07b322f6dbbbd)

## Add a shader to your design

You can add a shader in two ways:

* **From the toolbar**: pick a shader and drop it onto the canvas.
* **As a background fill**: select a frame, then add a shader as its background fill from the properties panel on the right.

![The Shader tool in the canvas toolbar, with a shader applied to an example image](https://mintcdn.com/wonder-0722b0f6/txvZZNRKXPPmeY_S/images/shaders/add-from-toolbar.webp?fit=max\&auto=format\&n=txvZZNRKXPPmeY_S\&q=85\&s=ed1a93c6e8aa7f178216dbe1a048dc78)

## Shader presets

The Free plan includes 1,000 curated presets.

You can browse the library by type:

* **Background shaders**: animated gradients and surfaces for full-bleed backgrounds.
* **Image shaders**: effects that run over an image.
* **SVG shaders**: generative, vector-based surfaces.

## Customization

Once a shader is applied, you can tune it to fit your design. You can change the colors or other values depending on the shader type. To open more advanced customization, click the little preferences icon in the  sidebar panel.

![The Shader settings popover with sliders for pixel size, spread, paper roughness, displacement, and grain](https://mintcdn.com/wonder-0722b0f6/txvZZNRKXPPmeY_S/images/shaders/adjust.webp?fit=max\&auto=format\&n=txvZZNRKXPPmeY_S\&q=85\&s=54091222cabae7ef78ed06ec0540b981)

## Exporting shaders

When exporting or developing a design which contains a shader, the shader is fully functional and loaded via the `shaders/react` package by [shaders.com](https://shaders.com). To learn more about the package, please read the documentation [here](https://shaders.com/docs/guide).

```typescript theme={"theme":{"light":"github-light","dark":"github-dark"}}
import { FilmGrain, FlowingGradient, Grid, Shader } from 'shaders/react'

function ShaderEffect() {
  return (
    <Shader style={{ position: 'absolute', inset: 0, zIndex: -1, pointerEvents: 'none' }}>
      <FlowingGradient
        colorB="#2b7063ff"
        colorC="#4d8bff"
        colorD="#35ffb2"
        colorSpace="oklab"
        distortion={0.2}
        seed={30}
        visible={true} />
      <Grid
        blendMode="linearDodge"
        cells={30}
        opacity={0.01}
        thickness={0.4} />
      <FilmGrain
        strength={0.1} />
    </Shader>
  )
}
```

## Limitations

Shaders are not yet supported by the Wonder AI chat. Also, we currently do not support variable-driven shaders. We are working on shipping this implementation soon.

> [!WARNING]
>
> **Performance**\\
>
> Shaders are GPU-heavy. Using a lot of shaders on one canvas can cause FPS drops.


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