Search
Close this search box.

How to Create Gradient Text in Gutenberg

You can improve the aesthetic attractiveness of your Gutenberg blocks by incorporating eye-catching gradient text using the power of Cascading Style Sheets (CSS).

This tutorial dives into the step-by-step process of adding gradient text to your Gutenberg by adding custom CSS without the help of any third-party plugins. We’ll cover the required CSS code, explain how to apply it to your blocks, and offer customization options to help you achieve the desired look and feel.

Steps to Create Gradient Text in Gutenberg

Step 1: Add the Additional CSS Class

First, we will add a unique CSS class name to the text blocks (Paragraph, Heading, etc).

Go to the Gutenberg WordPress editor to create new content (page/post) or select your existing content. Afterward, choose any block you want to add the gradient to. In this example, we will create the gradient text for the Heading block.

Next, go to the Block settings -> Advanced. Afterward, add your CSS class specified into the ADDITIONAL CSS CLASS(ES) input field. You can add the class name "gradient-text“.

Step 2: Add the Additional Custom CSS

Once you have a unique CSS class name for the block you want to create the gradient to, next, you need to add additional custom CSS to your WordPress site.

On your WordPress dashboard, go to Appearance -> Customizer -> Additional CSS. Copy the CSS snippet below and paste it into the input field.

Note: If you’re using a block theme, click here to learn how to enable Theme Customizer on your WordPress.

.gradient-text{
    background: linear-gradient(180deg, #0167ff 34%, #73ff09 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

Once you finish adding the CSS snippet, apply it by clicking the PUBLISH button.

Next, return to the WordPress Gutenberg editor and preview your page in a new tab to see the result.

If you are happy with the gradient color applied to your text (as in the image above), keep it like this and save your project if you want to. But, if you’re going to change with a different gradient color for your text, you can edit the CSS snippet more specifically on the CSS gradient code (see the image below).

You can create a gradient using CSS gradient online tools to get the CSS gradient code. Click here to see some CSS gradient tools that we recommend. Once you finish creating the gradient, copy the CSS and replace the existing CSS gradient code with a new one by pasting the CSS (see the image below).

That’s it. Now you’ve successfully created a gradient text in Gutenberg. Don’t forget to save or publish your project if you want to.

The Bottom Line

Gradient text is a simple way to inject creativity into your website using Gutenberg, the well-liked block editor for WordPress. You may add visual appeal and dynamic text effects to your content to make it more engaging for your users by following a few simple steps.

Explore the possibilities of customizing gradient text color in Gutenberg to elevate the overall user experience and make your content stand out. We hope this article is helpful, and if you have any questions or feedback, please don’t hesitate to contact us.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Picture of Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to turn your WordPress knowledge into revenue? OF COURSE!

Leave a Comment

Share This
Hey 👋🏻
Do you have a WP blog?
If so, you may need these. All the resources you need to grow your blog.

Your popup content goes here

50%

Where should we send the template?

After entering your email address, you will be added to our newsletter subscribers. You can unsubscribe anytime.

Want to Build Passive Income Like the One on the Screenshot Below?

Click the button on the right side to learn how 👉🏻
5 easy steps to turn your WordPress knowledge into monthly recurring revenue.

Click the above button to close the popup.