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

# Backgrounds

> Set a solid color, linear or radial gradient, or image background for your form.

The background is part of the form's theme and fills the page behind each question card. Three types are available: **solid**, **gradient**, and **image**.

Open the **Design** tab in the studio and look for the **Background** section to configure it.

***

## Solid

A single flat colour fills the entire background.

| Setting | Default   | Notes              |
| ------- | --------- | ------------------ |
| `color` | `#ffffff` | Any CSS hex colour |

This is the simplest option and works well for clean, minimal forms.

***

## Gradient

A colour gradient fills the background. Two gradient styles are available.

### Linear gradient

A gradient that transitions in a straight line across the background.

| Setting      | Notes                                                                          |
| ------------ | ------------------------------------------------------------------------------ |
| `rotation`   | Angle in degrees (0 = top-to-bottom, 90 = left-to-right)                       |
| `colorStops` | Array of colour + position pairs (e.g. `#6d28d9` at `0%`, `#3b82f6` at `100%`) |

You can add as many colour stops as you like. Drag them to reorder or adjust positions.

**Example:** A purple-to-blue diagonal gradient:

```
rotation: 135°
stops:
  #7c3aed  0%
  #3b82f6  100%
```

### Radial gradient

A gradient that radiates outward from a central point.

| Setting      | Notes                                                         |
| ------------ | ------------------------------------------------------------- |
| `radius`     | Size of the inner circle as a percentage of the container     |
| `colorStops` | Same format as linear — inner colour first, outer colour last |

Radial gradients work well for spotlight-style forms or soft vignette backgrounds.

***

## Image

A custom image fills the background.

| Setting    | Default     | Notes                                                                             |
| ---------- | ----------- | --------------------------------------------------------------------------------- |
| `url`      | —           | Upload or provide a URL to your image                                             |
| `size`     | `cover`     | `cover` (fill, may crop) · `contain` (fit, may letterbox) · `auto` (natural size) |
| `repeat`   | `no-repeat` | `no-repeat` · `repeat` · `repeat-x` · `repeat-y`                                  |
| `position` | `center`    | CSS background-position value (e.g. `center`, `top left`, `50% 20%`)              |

<Note>
  For best results use an image at least 1920 × 1080 px. Very large images
  increase load time. Compress images to under 500 KB when possible.
</Note>

<Warning>
  When using a dark or busy image background, check that the surface colour
  (set in the theme) provides enough contrast for question cards to remain
  readable. Consider using a semi-transparent surface or a lighter surface
  colour.
</Warning>

***

## Choosing between types

| Use case                             | Recommended type          |
| ------------------------------------ | ------------------------- |
| Clean, corporate look                | Solid white or light grey |
| Brand-forward, vibrant form          | Linear gradient           |
| Soft, premium feel                   | Radial gradient           |
| Photo survey or immersive experience | Image                     |

***

## Next steps

<CardGroup cols={2}>
  <Card title="Themes" icon="palette" href="/building-forms/design/themes">
    Configure colours, typography, and border radius.
  </Card>

  <Card title="Branding" icon="star" href="/building-forms/design/branding">
    Add your logo and customise the powered-by footer.
  </Card>
</CardGroup>