fbpx

How to Add Gradient Text in Elementor: A Step-by-Step Guide

Facebook
Twitter
LinkedIn
Pinterest
WhatsApp
Telegram

How to Add Gradient text in Elementor by lmscrafter

Adding gradient text in Elementor can elevate your website design and make your content stand out. But one of the main problems is that Elementor does not offer any native widget or addon for that, you need to purchase the plugin add-ons like Happy Plugins Gradient Widget or unlimited-elements gradient text .
In this guide, I’ll walk you through the steps to add gradient text in Elementor free without using an add-on or premium plugin. So without a further do lets jump onto step by step process

Create or Edit a Page with Elementor

  1. Navigate to Pages > Add New to create a new page or go to Pages > All Pages to edit an existing page.
  2. Click Edit with Elementor to launch the Elementor editor.

Add a Text Widget

  1. In the Elementor editor, click the + icon to add a new section.
  2. Choose the desired structure for your section.
  3. From the Elementor sidebar, drag and drop the Heading widget into the section.

Apply the Gradient

You will need to use custom CSS to apply a gradient to your text. Here’s how:

  1. Click on the Advanced tab in the widget settings.
  2. Scroll down to Custom CSS.
  3. Enter the following CSS code:

 

				
					selector {
  background: linear-gradient(300deg, #8982fd, #6025c9,
  #dc08df);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

				
			

This code is for if you want to use 3 colors, down below the code if you want to use two colors gradient

				
					selector {
  background: linear-gradient(45deg, #ff007a, #00d4ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

				
			

This code will apply a gradient that transitions from pink (#ff007a) to light blue (#00d4ff). You can adjust the colors and the angle (45deg) to suit your design needs. If you want to create your own gradient I’ll recommend you css gradient 

how to add gradient text in elementor color picker.png

Conclusion

By following these steps, you can add beautiful gradient text to your Elementor Pro designs, enhancing the visual appeal of your website. With Elementor Pro’s flexibility and the power of custom CSS, the design possibilities are endless.

For more tips and tutorials on Elementor Pro, be sure to check out our other content and subscribe to our YouTube channel.

Facebook
Twitter
LinkedIn
Pinterest
WhatsApp
Telegram
Picture of Mubashir taqi

Mubashir taqi

Mubashir Taqi stands as a top-rated Freelancer developer, bringing to the table an expansive 6+ years of expertise. His specialization lies in crafting exceptional Membership and LMS sites, amalgamating innovation with functionality. With a commitment to excellence and a keen eye for detail, Mubashir continues to elevate the digital landscape with his unparalleled skills and dedication.

Leave a Comment

Your email address will not be published. Required fields are marked *