How to add a gradient background to Retool containers

A little tip about setting a gradient color to retool container background

Here's a quick tip to set a gradient color for the background of a Retool container:

  1. Detach the Style from the Token: Before customizing, ensure the style isn't tied to any existing token.
  2. Add the Gradient in the Style Panel: Use CSS syntax in the background style panel, wrapped in double curly brackets.

Example for a linear gradient:

{ { "linear-gradient(45deg, red, blue)" } }

Examples of Gradient Styles:

Linear Gradient:

Linear Gradient

Radial Gradient:

Radial Gradient

With Usable Colors:

Usable Colors

Customize to enhance your interface with appealing gradient backgrounds!

Have a business need or a project in mind?

We help ambitious companies ride the change