Global Gradients

Introduction to Global Gradients in Breakdance

This tutorial demonstrates how to use Breakdance’s Global Gradients feature to create consistent gradient designs across various elements of a website.

Setting Up a Global Gradient

Choose any element with a property that offers a gradient color picker. Once you’ve chosen an element property, edit it and create a gradient.

Once you’ve created the gradient, click the plus icon at the bottom of the color picker to add the gradient to the global gradients list. Don’t forget to give it a memorable name.

After clicking ‘Save’, the gradient will be available to use in any gradient color picker.

Applying the Global Gradient Elsewhere

Now, you can apply this gradient to other parts of your design. For example, adding it to a section background:

  1. Select the section where you want to apply the gradient.
  2. Go to the background settings and choose ‘Gradient’ as the background type.
  3. Select your new gradient from the Global Gradients at the bottom.

Updating Gradients Globally

If you need to change the gradient later:

  1. Click the ‘…’ button at the top right and go to Global Settings > Colors > Palette
  2. Locate your gradient in the Gradients list.
  3. Make adjustments to the gradient, and these changes will apply wherever the gradient is used throughout your design.
  4. You can also delete or rename gradients here.


This Global Gradients feature in Breakdance significantly streamlines the design process, allowing for easy reproduction and modification of gradients across different website elements.