How To Add A Gradient On Text In WordPress Easily

How To Add A Gradient On Text In WordPress Easily

Customizing your website is more complicated than you think if you’re unaware of the correct tools. Creating an excellent website design using software like Illustrator, Figma, or InVision is easy. But it’s hard to replicate the same on your website, especially in WordPress, where hundreds of tools and plugins exist.

Gradient on Text can be easily added to your WordPress text or heading using Grigora Kit or Additional CSS. We’ll look at both these methods, and it’s up to you to decide which one you’ll go with.

What is Gradient On Text?

Color Gradient typically refers to the gradual change in color from one point to another. That point can be a single point or an axis where the color change occurs. Here are a few examples or gradients –

By the way, all the above gradients are created using the Advanced Group block available in Grigora Kit.

Gradient On Text: Using Grigora Kit

We just released a “Text” Block in Grigora Kit plugin, and we’re super happy about the features that it comes with. The traditional paragraph block has limited color options and does not support hover color changes. As an alternative, we released our block, which supports solid/gradient colors and has on hover effect.

First, you’ll need to log in to your WordPress admin dashboard and head over to the Plugins section.

Click on Add New button and search for “Grigora’s Kit”. Soon, a plugin with a purple logo will show up.

Installing Grigora Kit
Installing Grigora Kit

Click on Install and wait for it to finish Installing.

Activating Grigora Kit
Activating Grigora Kit

Once done, Activate the plugin.

Opening Grigora Kit Modules
Opening Grigora Kit Modules

Soon after activating the plugin, you’ll see a “Grigora’s Kit” option on the WordPress sidebar. Click on this button to activate the modules.

Activating Blocks module
Activating Blocks module

For the context of this tutorial, we’ll only require to activate the “Blocks” module from “Grigora’s Kit”. This will enable all the custom Gutenberg Blocks on your website. These blocks can be accessed from your Block Editor anytime.

Once activated, open up the post where you want to have a Gradient Text; otherwise, you can just start with the New Post.

Adding Text Block
Adding Text Block

Click on the plus icon from the top left and search for Grigora’s Kit section. Select the Text block from the available blocks.

Colors Panel
Colors Panel

Now, the Text Block will be added to your Block Editor. You can type whatever you want. Once done, open the Colors panel from the right sidebar. Here you can select a color for your Text.

Adding Gradient to Text
Adding Gradient to Text

You can tap on the Gradient tab and select your Gradient.

Voila, this will add a gradient on text. Easy, isn’t it? Here’s a live example of it –

You Are Awesome

Gradient On Text: Using Additional CSS

Additional CSS is a great way to add customized styles to your website. You can add any customized code and get your styles done. But it’s not convenient to add and edit custom CSS whenever you want to add small changes. Moreover, it is hard to understand for someone from a non-technical background, like my Mom. She loves doing things that can be done interactively.

Login to your WordPress admin panel and head to Appearance > Customize section. If Customize section is unavailable for you, you’re out of luck. You’re probably using a Block Theme that doesn’t support adding custom CSS.

Additional CSS
Additional CSS

After opening the Customizer, look for the Additional CSS option on the window’s left sidebar. Click it.

It’ll open up a code window where paste this piece of code from below –

.grigora_custom_gradient{
      background: linear-gradient(298deg,rgb(246,129,217) 0%,rgb(224,81,110) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
}
Gradient CSS
Gradient CSS

This will add a gradient to all the text or elements that have “grigora_custom_gradient“. Relax; there’s no need for you to understand the code for now.

After saving the above additional CSS, open up your Block Editor, create a Paragraph Block, and enter the text you need.

Adding Custom Class To Paragraph
Adding Custom Class To Paragraph

Then click on the “Advanced” panel on the right sidebar. In the additional CSS classes section, add “grigora_custom_gradient” (without the quotes). Note: This will only add a gradient in front end. You won’t be able to see the preview of the text gradient.

Gradient on Text
Gradient on Text

You can see the change being applied instantly to your text. The drawback is that whenever you want to change the gradient color, you’ll have to open up the customizer and edit it there.

Seems like using Grigora Kit for adding Gradients is much more convenient than using Custom CSS.

FAQs

How do you make a linear gradient text color?

Select gradient option in Text block from Grigora Kit. Here you can choose from linear gradient and radial gradient.

How to add a third color in Gradient?

In Gradient Picker, add a third color by clicking on the color box.

Leave a Reply

Your email address will not be published.

Categories