Skip to main content
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.
SettingDefaultNotes
color#ffffffAny 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.
SettingNotes
rotationAngle in degrees (0 = top-to-bottom, 90 = left-to-right)
colorStopsArray 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.
SettingNotes
radiusSize of the inner circle as a percentage of the container
colorStopsSame 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.
SettingDefaultNotes
urlUpload or provide a URL to your image
sizecovercover (fill, may crop) · contain (fit, may letterbox) · auto (natural size)
repeatno-repeatno-repeat · repeat · repeat-x · repeat-y
positioncenterCSS background-position value (e.g. center, top left, 50% 20%)
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.
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.

Choosing between types

Use caseRecommended type
Clean, corporate lookSolid white or light grey
Brand-forward, vibrant formLinear gradient
Soft, premium feelRadial gradient
Photo survey or immersive experienceImage

Next steps

Themes

Configure colours, typography, and border radius.

Branding

Add your logo and customise the powered-by footer.