log

How to add gradient background to Retool containers

• 1 min read

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!