Native Divi 5 ModuleFree

Divi Gradient Heading

Gradient headings without writing any CSS.

Why use the Divi Gradient Heading module?

A gradient headline is common in modern web design and awkward in stock Divi: it means custom CSS with background-clip:text, tested per browser, redone every time the copy changes.

Gradient Heading is a normal Divi heading with a two-colour gradient fill built in. Pick linear or radial, set the two colours and where each one starts, and the text renders with the gradient as its fill.

The line beside this is the live module.

What you get out of it

Linear or radialTwo gradient types, each with its own angle or position control.Two colours, two stopsEach colour has its own position along the gradient, from 0 to 100 percent.It can be a linkUse Link turns the whole heading into an anchor, with open-in-new-window and nofollow options.A real heading underneathIt takes the standard heading level and font group, so it behaves like any other Divi heading in the outline.No custom CSSThe gradient is a module setting, not a hand-written background-clip hack.Free, and native on Divi 5It ships in Divi Torque Lite on WordPress.org, built on the Divi 5 engine.

Everything the Divi Gradient Heading module does

Every option below ships in the free plugin.

Gradient type: linear or radialLinear: angle in degreesRadial: position, a 9-value enumPrimary and secondary colourPrimary and secondary stop location, 0-100%Turn the heading into a linkOpen link in a new windowAdd nofollow to the linkStandard heading level and font groupCustom CSS hook for the title

See the Divi Gradient Heading in action

Every headline below is the live module, not an image. This one is the default linear type.

Linear, 90 degrees

Indigo to green, left to right.

Linear at different angles

Angle is a plain number in degrees, so the direction of the gradient is exact.

0 degrees

Bottom to top.

45 degrees

Diagonal.

180 degrees

Right to left.

Radial gradients

Radial takes a position instead of an angle: three rows of left, centre and right, each top, centre or bottom.

Centre centre

The gradient radiates from the middle of the text.

Top left

The gradient radiates from one corner.

Where the colours start and stop

Each colour has its own stop position, so the transition can be pushed to one side instead of splitting evenly.

Compressed stops

Primary stops at 30%, secondary starts there too, for a harder edge between the two colours.

Building one takes about a minute

Three steps, and none of them involve custom CSS.

1Drop in the moduleAdd Gradient Heading to any row. It arrives with a default two-colour gradient already applied.2Write the headingThe Content panel takes the text and, if you want the heading to link somewhere, a URL.3Pick the gradientThe Design tab holds the type, the two colours, and either the angle or the position depending on the type.

Questions people ask first

Short answers, all of them checked against what the module actually does.

Is the Gradient Heading module free?Yes. It ships in Divi Torque Lite on WordPress.org.Does it need Divi 5?It is a native Divi 5 module. A Divi 4 layout using the same module converts across, since it shares the same shortcode.Can I use more than two colours?No. The gradient is exactly two colours, primary and secondary, each with its own stop position.Can the heading link somewhere?Yes. Use Link turns the whole heading into an anchor, with options to open it in a new window and add nofollow.Does it work with any heading level?Yes. It uses the standard Divi heading font group, so the level and typography sit alongside any other heading on the page.Can the gradient animate?No. The gradient is a static fill. There is no motion or hover-triggered colour shift.