1. Help Center
  2. Using Foleon
  3. ➕ Working in the editor

Use gradients in your design

Add a burst of color to your page with our gradient tool — gradually blending one color into another. Strengthen your brand identity by creating a modern and polished look. 🌈

What are gradients?

A gradient color is a smooth transition from one color to another. Think of a sunset, where the sky goes from a bright orange near the sun to a deep blue farther away. In Foleon, you have two gradient options:

  • Linear gradient 📏 — A color transition that follows a straight line, smoothly changing from one color to another in a specific direction.
  • Radial gradient 🟠 — A color transition that radiates outward from a central point, creating a circular or oval blend of colors.

Group 965

In the example below, we set a gradient as a color overlay on top of a black and white background image. It's a great way to make images come alive with your brand colors.

Screenshot 2023-11-09 at 11.23.03

 

How to create a gradient

You can create or set a gradient anywhere there's a color picker. Follow the steps below:

  1. In the color picker, click the gradient button.
  2. Choose between linear or radial
  3. Adjust the angle to define the direction of your gradient
  4. Select the first color and adjust the level of transparency 
  5. Select the second color and adjust the level of transparency 
  6. Change the second color and adjust the level of transparency
  7. Add more colors by clicking on the color slider (maximum of 5 colors per gradient)

💡You can create up to 23 gradients in your Foleon Doc.

ezgif.com-video-to-gif (4)

Gradients can be added as a background color anywhere there’s a color picker. This includes:

💡 If you’re working with the Content Builder, you can only add gradients in your Brand Kit to later select on the canvas. If you have access to the Content Studio, you can create gradients straight from your content editor. However, we do still recommend adding gradients in your Brand Kit or brand settings so you can easily select them later.

Add a gradient to your brand

In addition to adding gradients manually to each element, you can streamline the process by making gradients part of your Brand Kit or brand settings. This speeds up content creation for your team while ensuring brand consistency.

In your Brand Kit, scroll down to colors. In the gradients section, click +add gradient to start creation. You can follow the same steps as described above in the How to create a gradient section. 👆

Make sure to save your changes in the end. Do you want to apply the gradient to existing Foleon Docs? You’ll have to click apply Brand Kit in the brand settings.

Group 966

Related articles