Skip to content
Get Pro

Gradient Heading

The Gradient Heading module lets you add eye-catching, gradient-filled headings to any Divi 5 page — no custom CSS required. Pick a linear or radial gradient, fine-tune the colors and angle, and optionally turn the heading into a link.

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 — wrap the heading in a link.
  • Link URL — the destination URL.
  • Link Options — open in a new window and/or add nofollow.

Design

Gradient

  • Gradient Type — Linear or Radial.
  • Primary Color and Primary Color Location.
  • Secondary Color and Secondary Color Location.
  • Gradient Angle — direction of a linear gradient.
  • Radial Position — origin of a radial gradient (center, corners, edges).

Use the standard Divi Text, Spacing, and Border panels to control font, size, weight, alignment, and spacing of the heading.

Tip

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