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

Gradient Background

The Problem

I want to add a gradient colour effect to a Bloc background.

The Solution

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 29th November 2018

Was this article helpful?

Related Articles