Skip to content
StoreDocsSupport
Get Divi Torque

Gradient Heading

Gradient Heading adds a heading filled with a linear or radial gradient, with no custom CSS. Pick the colors, set where each one sits and the angle, and optionally turn the heading into a link. This module works in Divi 4 and Divi 5.

How to add the Gradient Heading module

  1. Add or open a section and row on your page.
  2. Click the grey + icon to add a new module and search for Gradient Heading.
  3. Insert the module, then open its settings to enter your text and set the gradient.

Content

Text

  • Title Text: The heading text. Use <br> for a line break.
  • Use Link: Off by default. Wraps the heading in a link.
  • Link URL: The destination URL.
  • Link Options: Open in new window, and Add nofollow.

Design

Gradient

  • Gradient Type: Linear (default) or Radial.
  • Primary Color (default #5b2cff) and Primary Color Location (default 11).
  • Secondary Color (default #e02b20) and Secondary Color Location (default 37).
  • Gradient Angle: The direction of a linear gradient. Default 130.
  • Radial Position: The origin of a radial gradient. Choose Center Center (default), a corner, or an edge.

Text

  • Title: Font settings for the heading, including the heading level. The default is H1 at 60px, weight 700, with a 1.2em line height.

Spacing and other standard Divi options are available as usual.

Tip

For a bold effect, pair a heavy font weight with a two-color gradient at a 45 degree angle. Keep gradients within your brand palette so headings stay legible against the section background.