Apply Gradient Text effect in Gutenberg WordPress

Gradient text effect in certain headline or texts on your web page not only looks cool and awesome but also it is eye catching and attracts user’s attention. In this article, I’ll show you how you can apply Text Gradient effect in texts or links in WordPress Gutenberg block editor using custom CSS. I’ll also show you can create your own shortcode and and use it in any text/headline/link you want.

Generate CSS Gradient Color

First, we need to generate the desired gradient color in CSS. And for that there are many online free CSS gradient generator tools are there. Among them, I personally love cssgradient.to. It is very user friendly and very easy to generate cool gradient.

Once you are there, create gradient color you like and after you are done, down below you will find a CSS section where the gradient codes are generated. Copy the codes and follow the next step.

Add the CSS code in WordPress

Now that you have created your own gradient CSS codes, lets put them into a CSS class and insert it to your Website.

Down below, I’ve created the class for you. All you need to do is paste the codes you’ve generated inside the codes. To make it simpler for you I’ve commented out where you need to paste the codes ( Line #3 ).

.dtn-text-gradient {
    /** Insert your code between this block */
    /** Insert your code between this block */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

Example :

.dtn-text-gradient {
    /** Insert your code between this block */
    background: rgb(107,251,92);
    background: linear-gradient(71deg, rgba(107,251,92,1) 0%, rgba(89,139,133,1) 53%, rgba(233,18,60,1) 100%);
    /** Insert your code between this block */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

Now all you need to do is insert the code in your WordPress site.

Before you do that, I would recommend you to make a child theme of your current theme and paste the code inside your child theme’s functions.php file. You can use a child theme generator plugin to create your child theme. The reason you want to do that is, whenever the theme author of your current theme release an update, it will replace all the codes you added on the theme file. The child theme inherits all the codes of the parent theme and then apply the custom codes in the theme. ( And make sure you have the child theme active all the time. )

Now to insert the code, goto is Appearance -> Customize and there goto Advanced CSS tab. Paste the code there and you are done!

How to Apply the CSS Class

Okay, Lets apply this effect on a text and see how it looks. Goto your Page editor i.e. Gutenberg Block Editor and create a paragraph or headline and on the right sidebar inside Block section -> Advanced tab enter the class name you have just created. In this case it will be dtn-text-gradient

Update the page and Voila! you got yourself a cool gradient text effect!

Hi subscribe to my latest updates by clicking on the icon on the bottom left corner and click allow notifications.

Gradient Text effect on a particular text in a sentence

One problem we have now is that, this class you have added, will be applied to the whole paragraph or headline. In some cases its okay to have an entire small headline that effect but it looks bad if we apply this effect to the entire long paragraph or headline.

To resolve this issue, the simplest technique is to make a shortcode for that and apply it to the only texts that we need.

Creating the shortcode

To create the shortcode all you need to do is paste the following code to your WordPress child theme’s functions.php ( Appearance -> Theme Editor ) file and save the page.

/* Function to text/link gradient shortcode */
function dtn_link_shortcode( $atts, $content = null ) {
    return '<span class="dtn-text-gradient">' . $content . '</span>';
}
add_shortcode( 'dtn-textgradient', 'dtn_link_shortcode' );

How to use the shortcode

Now whenever you want to highlight a text or link with gradient effect use this shortcode like this

[dtn-textgradient]My Awesome Text[/dtn-textgradient]

And there you go! This is how you can make your own gradient text effect in WordPress Gutenberg block editor. You can use this shortcode anywhere else as well.

Hey also, I’ll really appreciate if you can share the post to your social media