Use gradients in your designs

Wherever you can pick a colour for a background or a button, you can usually turn on a gradient: a smooth blend between two colours.

The gradient editor

1. Turn on Use a gradient.
2. Pick the Start colour and the End colour — with the picker or by typing a code like #f97316.
3. Choose Linear (straight blend; set the Angle) or Radial (from the centre outwards).
4. Or click one of the ready-made gradients below.

Turn the switch off to go back to the plain colour.

Where you can use it

• Forms and quizzes — Design tab: the submit button and the form background.
• Websites and landing pages — Site settings → Button gradient sets every main button on the site (hero, cards, buy and sign-up buttons). Block and section backgrounds: open a block's style settings → Background → Gradient.
• Emails — in the email designer: the email background, the content background, each row's background and buttons.
• Communities — community settings → Branding → Banner gradient. It shows where your banner appears when there's no banner image: the community page, the feed, Discover cards.

Good to know about emails

Outlook and some Gmail views don't show gradients. They show the plain colour you picked above the gradient instead, so choose a colour close to your gradient.