Divi 5 reworks how gradients work and adds new ways to style text. Gradients now behave like any other attribute, so you can copy, paste, reuse, and save them, and text can be filled with a gradient or an image and outlined with a stroke.
The new gradient picker panel
Divi 5 brings every gradient option together into a single gradient picker panel. It works the same way everywhere a gradient can be set: in the Background option group, in the new Text Effects settings, and even inside the Variables manager.
If you have used the color picker, this will feel familiar. The panel gives you access to all gradient options and your saved gradient variables in one place, so you edit gradients the same way no matter where they appear.
Build a gradient
Inside the gradient picker, you build a gradient using these controls:
Gradient Type: Choose Linear, Circular, Elliptical, or Conical. Circular is Divi's label for a radial gradient.
Gradient Stops: Add, remove, recolor, and reposition the color stops that make up the gradient.
Gradient Angle: Set the direction of the gradient. This applies to Linear and Conical types.
Gradient Position: Set where the gradient originates for Circular and Elliptical types, such as Center, Top Left, or Bottom Right.
Manage gradients as a single field
In Divi 5, a gradient is now a single field, the same as any other attribute. You no longer have to manage each internal setting on its own. From the gradient field, you can:
Copy a gradient and paste it onto another element.
Extend a gradient to other elements.
Find and replace a gradient across your design.
Inspect a gradient to see its settings.
Convert a gradient into a Global Gradient variable.
This makes reusing and updating gradients much faster, especially on larger pages.
Save a gradient as a variable
Divi 5 adds a new variable type: gradient variables. A gradient variable lets you define a gradient once and use it across your whole site. When you edit the variable, the gradient updates everywhere it is used. This is the gradient version of Global Colors.
There are two ways to create one:
Open the Variables manager, select the Gradients category, and choose Add Global Gradient. Then build the gradient with the gradient picker.
Right-click an existing gradient field and choose Convert to Variable to turn that gradient into a reusable variable right away.
Once saved, the gradient variable is available anywhere a gradient is used, including backgrounds and text fills.
Tip: If you plan to reuse a gradient on more than one element, save it as a variable first. Editing it later updates every element at once, instead of one at a time.
Fill text with a gradient or image
Text styling gets a new Text Effects group on the Design tab. It appears inside the text and font settings of an element, such as Text, Heading Text, and Title Text. Text Effects controls how the text itself is filled and outlined.
Start with the Fill Type setting:
None: The text uses its normal text color. This is the default.
Gradient: Fills the letters with a gradient. A Gradient Fill control appears so you can add and position the gradient stops or pick a gradient variable.
Image: Fills the letters with an image. An Image Fill control appears, along with adjustment settings for size, width, height, position, horizontal and vertical offset, repeat, and blend.
Transparent: Makes the text fill see-through, which works well combined with a stroke for hollow, outlined text.
Add a text stroke
A stroke adds an outline around your letters, which is a simple way to make text stand out against a busy background or image. In the Text Effects group:
Set Stroke Width to a value above 0px. The default is 0px, which means no stroke.
Once a width is set, the Stroke Color setting appears. Choose the color of the outline.
The fill and the stroke are independent, so you can use just a fill, just a stroke, or both together.