1. Home
  2. Using Blocs
  3. Blocs
  4. Gradient Background
  1. Home
  2. Using Blocs
  3. Design
  4. Gradient Background
  1. Home
  2. Tips
  3. Gradient Background

Gradient Background

How to add a background gradient

To apply a gradient colour effect to a Blocs background, you will need to use a custom class. The steps below will guide you through the process.

1. Apply a custom class to the Bloc element you wish to add a gradient to and then open it in the class editor.

2. Now from the Class Editor options, navigate to the tab that has a paint brush symbol and left click it. This will present you with the background styling options.

3. Set the background style to gradient to reveal the custom class gradient controls. Apply the gradient colour and angle values using the available controls.

Beginners Tip

Make sure you don’t have a global swatch or background image applied to the selected Bloc element as this will overlap the gradient and prevent it from showing.

Updated on 31st March 2021

Was this article helpful?

Related Articles