Divi Text Module Gradient with Gradient Shadow

Easy

CSS

Details

In this Divi Code Snippet, we will target the Divi Button Module to add a colorful gradient fill on the text, as well as an awesome gradient shadow. I discovered this method using Tailwind CSS on a reddit post, and figured I would adapt it to work with the Divi Button module.

You can add the CSS in either a code module, Divi Theme Options, or the style.css of your Divi Child Theme. Once that is done, just make sure to wrap your text in a span tag using the code below. You might have to play with the transform: translateY(-15%); to get the shadow in the right spot.

If you want an animated version of this snippet, please check out our post on a Divi Text Module with Animated Shadow Gradient.

Snippets Demo

Code

1

Description:
This code will use a mask to give your text a gradient fill.

Language: CSS

Where to add: Divi Theme Options

                        .de-text-gradient {
    position: relative;
    display: inline; /* or 'inline-block' depending on layout needs */
    background-image: linear-gradient(to right, #f687b3, #7f9cf5, #48bb78);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

2

Description:
This CSS adds a pseudo element that create the blur effect with the same gradient as the text.

Language: CSS

Where to add: Divi Theme Options

                        .de-text-gradient::before {
    content: attr(data-text); /* duplicate the text */
    position: absolute;
    top: 50%; /* centers vertically */
    left: 0;
    right: 0;
    transform: translateY(-15%); /* ensures perfect vertical centering */
    z-index: -1; /* places the shadow behind the text */
    background-image: inherit; /* uses the same gradient as the parent */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: blur(15px); /* adjust blur intensity as needed */
    width: 100%; /* ensures the blurred text has the same width as the original text */
    height: 100%; /* ensures the blurred text has the same height as the original text */
    display: inline; /* or 'inline-block' */
    font-size: inherit; /* ensures the blurred text is the same size as the original text */
    line-height: inherit; /* keeps the line height the same */
    text-align: center; /* centers the text horizontally */
}

3

Description:
You need to wrap your text in the Divi Text modules in a span with a data-text element which is what is used to duplicate the text for the pseudo element.

Language: CSS

Where to add: functions.php

                        <span class="de-text-gradient" data-text="Animated Gradient">Animated Gradient</span>

Related Snippets

Easy | CSS

Liquid Glass with CSS and SVG

Jul 14 2025

Intermediate | PHP

Disable Divi Image Generation

Sep 13 2024

Easy | CSS

How to Align the Search Button in Divi Engine Filter: A Simple CSS Snippet

Aug 27 2024

Machine BodyCommerce Ajax Filter

Intermediate | CSSJavascript

Adding a Preloader to Your Divi Site

Jul 24 2024

Intermediate | CSSHTML

Divi Text Module with Animated Shadow Gradient

Apr 30 2024

Easy | Javascript

Vanta.js & Three.js Backgrounds for Divi & WordPress

Mar 06 2024

Easy | Javascript

Confetti Effect When Clicking a Divi Button Module

Jan 23 2024

Easy | Javascript

Confetti Effect When Submitting a Divi Contact Form

Jan 23 2024

Explore more from Divi Engine

Divi Form Builder

From simple contact forms to complex frontend post or product creation, Divi Form Builder has you covered.

Find out more

Divi Machine

Build complex websites that displays dynamic fields you can filter, search and so much more with the Divi Builder.

Find out more

Divi BodyCommerce

A versatile toolkit for developers using Divi and WooCommerce together, designed to boost your e-commerce site and achieve greater conversion rates.

Find out more

Divi Handoff

Let clients update content without touching the Divi Builder. Design layouts once, connect them to Flexible Content fields, and give editors simple forms for text, images, and sections.

Find out more

Divi Loop Extender

Unlock the Full Power of Divi 5 Loop Builder Add advanced sorting, filtering, and relationship logic right inside the Visual Builder.

Find out more

Divi Membership

Monetize your Divi websites by transforming them into membership sites with seamless subscription management, user-friendly interfaces, and customizable membership tiers.

Find out more

Divi Machine Accounts

Build an account area for your customers to edit their details, access wishlist, submitted posts and more. *Note: Requires Divi Machine installed and active