How To Make Text Gradient Effect In Elementor Pro

If you are using the simple heading text in the banner of your website for a long time so, now time to change it. Because you wanna stand out from the crowd means if you create something unique so you will stand out from others. Today in this blog you will learn HOW TO MAKE TEXT GRADIENT EFFECT USING ELEMENTOR PRO. So, without wasting any time let’s get started.

Alright so to make this gradient text, elementor doesn’t have any default features that you can make gradient color text so we have to use some CSS codes to make this cool color effect. But don’t worry you don’t have to write any single line of code, all the code snippets you will get here, you have to just copy it and paste it in the right place. So, here are a few simple steps to make this:

1. Place the text heading widget
2. Customization the text
3. Paste the CSS code
4. Customize the gradient color
5. Bottom line

Step-1 Place the text heading widget

First of all, you already know how to place the text heading, you make this gradient text anywhere on the page so, you can place your text heading widget as your requirements. I’ve placed it in the banner area, you can also use this in the banner area as well. Now move on to the next step how to customize it.

Step-2 Customize the text

So, to customize the text you have to go to the Style tab and then you can change the color, typography all these things. But for now, don’t change the color, keep it as the default color; you will know the reason very shortly with step by step process. So, here I’m changing the font, text size, font weight in the typography section and updating the changes, don’t forget to click on the update button.

Step-3 Paste the CSS code

After customization, we have to paste the CSS code. To paste the CSS code you have to go to the advanced tab and scroll down here you will find the CUSTOM CSS option so here is the place you have to paste the code. I will put all the CSS snippets, you have to copy and paste them. Here are the CSS snippets are given below:

  selector .elementor-heading-title{      background-image: linear-gradient(to right top, #1600ff, #0069ff, #0097ff, #00bcff, #00dcff);      -webkit-background-clip: text;  }

Now after you paste the code you may think that even after pasting the CSS code the text color is not changing so, now you have to go to the Style tab and make the text color transparent and that’s why I suggested to don’t change the text color before. So, after making the color transparent you will see the changes, the gradient comes in the text.

Step-4 Customize the gradient color

Now let me show you how to customize the gradient color and change the color angels etc. Now you have a lot of options to change the gradient angles. So if you can see in the images(*red arrow) that there is one code that [to right bottom] so, as the default code there is already set in the top but if you remove it and write bottom so, you will see that the gradient color angles are changed now. Also, you can change the direction by writing LEFT instead of RIGHT.

Also if you wanna change the gradient angle by using degree you can do that. Here in the second image, you can see that I write 30 DEG to change the gradient angle, also you can write -30 DEG. You can put any type of value as your requirements. So, you finally learn how to make the gradient color and how to change the gradient angle by using the top-bottom position and degree.

Now if you wanna change the gradient color so, how you can do that? So to change the gradient color I would suggest this website: https://mycolor.space/gradient Here you have to choose your both required colors and click on generate.

After you click on to generate you will see the CSS Code changed below. You have to copy the CSS code and paste it into the CUSTOM CSS section. Where to place it can be seen in the images. After you paste the code in the right place automatically the text color will be changed.

Bottom line:

So, in this blog, you learned how to make gradient text in elementor pro? Elementor is the most popular and powerful page builder that can create amazing creations with your creativity. The most important thing is that WE MADE A VIDEO ON HOW TO MAKE TEXT GRADIENT EFFECT IN ELEMENTOR PRO, here’s the link, you can watch this you will better understand:

https://youtu.be/6lfMs-XP1t8

That’s all there is to it! We hope that you’ve learned something new today and that you’ll be able to apply it to your own designs.

If you have any questions or feedback on this blog, please leave them in the comments. If you are facing problems making it, so you can comment on YouTube we will reply to you shortly!