---
title: "Gradient Heading"
url: "https://divitorque.com/docs/gradient-heading.md"
canonical: "https://divitorque.com/docs/gradient-heading/"
published: "2026-07-08"
modified: "2026-07-08"
author: "Fahim Reza"
description: "Add eye-catching gradient headings without touching CSS. Learn how to add and configure the Gradient Heading module in Divi — settings, options, and tips."
tags:
  - "Modules"
---

# 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.

### Link

- **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.