Source: https://divicake.com/blog/how-to-make-gradient-text-in-divi/ [Blog](https://divicake.com/blog/)/[Divi Cake News](https://divicake.com/category/divi-cake-news/) # How to Make Gradient Text in Divi Without Code By Divi Cake·12 July 2024·Updated 12 July 2024·4 min read Creating visually appealing and modern web designs often involves the use of unique and eye-catching elements. One such design feature that has gained popularity is gradient text We may earn a commission from affiliate links in this post. [Disclosure policy](https://divicake.com/affiliate-disclosure-policy/) On this page - [Step 1: Add a text Module](https://divicake.com#step-1-add-a-text-module) - [Step 2: Apply Gradient Background to the Row](https://divicake.com#step-2-apply-gradient-background-to-the-row) - [Step 3: Applying Filter Blend to the Column](https://divicake.com#step-3-applying-filter-blend-to-the-column) - [Step 4: Add Padding to the Row](https://divicake.com#step-4-add-padding-to-the-row) - [Final Result:](https://divicake.com#final-result) - [Wrapping Up:](https://divicake.com#wrapping-up) Creating visually appealing and modern web designs often involves the use of unique and eye-catching elements. One such design feature that has gained popularity is gradient text. Gradients add depth and interest to text, making it stand out and capture the viewer’s attention. If you are using [Divi](https://divicake.com/go/divi/), the powerful and versatile [WordPress](https://divicake.com/blog/wordpress-tutorial/) Theme, you can easily incorporate gradient text into your designs without any coding. In this blog post, we’ll guide you through the process of creating gradient text in Divi without writing a single line of code. Whether you are a beginner or an experienced Divi user, this tutorial will provide you with clear, step-by-step instructions to help you achieve stunning gradient text effect on your website. ## Step 1: Add a text Module To get started, open your Divi editor and either create a new post or page, or choose one that already exists. Add a new row with a single column. In the module options, select the text module. Once the module is added, you can begin editing and styling your text to your liking. Adding a text module in Divi is straightforward and allows you to create and customize text content easily within your Div WordPress website. Adding a text Module Read More: [Create a Professional Websites in just 2 Minutes – No Coding or Design Skills Needed](https://divicake.com/go/divi-quick-sites/) ## Step 2: Apply Gradient Background to the Row Start by clicking on the gear icon located on the row you want to modify. This will open up the Row Settings. Next, navigate to the Content tab and find the section labeled “Background”. Within this section, you’ll see an option for “Background Gradient”. Click on the plus icon to add a gradient to your row’s background. Adding a gradient background can make your website look more dynamic and visually appealing. Apply Gradient Background to the Row To customize the colors of your gradient, navigate to the gradient settings. Select the “Set Color” option to choose your desired colors. Additionally, explore other settings based on your requirements, as illustrated in the image below. You can customize the Gradient color to match your website’s design. Customizing the Gradient Color Read More: [Write Code, Generate Custom CSS, and Customize Your Website’s Design Using Divi AI](https://divicake.com/go/divi-ai/) ## Step 3: Applying Filter Blend to the Column Before applying a filter blending to the column in Divi, it’s important to first set the background color of the column. Here’s how you can do it: Click on the gear icon to access the column settings. Once there, choose the color white for the column background. This step ensures that your column has a clean, white backdrop before you proceed to add any filter blending effects. The column’s visual effects get enhanced after setting the color to white. Setting the column background color to white After you’ve changed the background color to white, the column will appear as shown in the image below: After applying the white color to the column you can see the enhanced visual effect in the column. After applying the white color to the column After setting the background of your column to white, navigate to the Design tab and click Filters. In the Filters setting, find the Blend Mode option and select “Screen” from the dropdown. By applying filter blends to a column, you can create visually striking effects that enhance the overall design of your website. Applying Filter Blend to the Column Read More: [Generate Web Pages With a Single Click](https://divicake.com/go/divi-ai/) ## Step 4: Add Padding to the Row Now, let’s adjust the gradient text you see in the image above. We’ll start by removing the colors above and below the text. To do this, go to the Row Settings and navigate to the Design Tab. Look for the Spacing section and click on Padding. Here, set both the top and bottom paddings to 0 pixels. To adjust the gradient text remove the colors above and below the text, by setting the padding to zero. Setting the Row Padding ## Final Result: Adding gradient text to your Divi Website can greatly enhance its look and engagement. Final Result of adding Gradient to text. ## Wrapping Up: Adding gradient text to your [Divi](https://divicake.com/go/divi/) Website can greatly enhance its look and engagement. In this guide, we’ve shown you how simple it is to create eye-catching [gradient effects in Divi](https://divicake.com/go/advanced-gradient-builder-for-divi/) without needing to code. By applying gradients to your text in Divi, you can transform it into visually appealing elements that grab attention. Whether you’re new to Divi or a seasoned user, mastering gradient text offers endless possibilities for creative expression and design refinement. Experimenting with different colors, gradients, and text styles to find what suits your website’s style best. Now that you have these skills, go ahead and [enhance your web design](https://divicake.com/blog/divi-enhancement-guide/) with dynamic gradient text. Your visitors will appreciate the modern, professional touch it brings. Start creating today and see how [Divi’s Web Design Tools](https://divicake.com/blog/free-web-design-tools-and-resources/) combined with your newfound gradient text expertise can breathe new life into your design. Read More: [How to add a Call To Action Button to Divi Menu](https://divicake.com/blog/adding-call-to-action-button-to-divi-menu/) About the author Written by Divi Cake. ## Submit a comment Comments are read before they appear. Your email is not published. Comment NameEmail Company website Submit commentSubmit commentSubmit comment The comment form needs JavaScript for its spam check. Thanks. Your comment is waiting for review and will appear here once it is approved. ## Do you need help with … - [Divi websites](https://divicake.com/divi-website-development/) - [Divi plugins](https://divicake.com/divi-plugin-development/) - [Fix a site](https://divicake.com/fix-existing-site/) - [Beyond Divi](https://divicake.com/beyond-divi/) - [Technical SEO](https://divicake.com/technical-seo/) - [SEO content](https://divicake.com/seo-content/) ## Save Annually on Divi [Save 69% on Divi VIP](https://divicake.com/go/divi-vip/)[Save 69% on Divi Cloud](https://divicake.com/go/divi-cloud/)[Save 69%, Divi Team](https://divicake.com/go/divi-teams/) ## WordPress Hosting & Tools [100% off on Kinsta for 1 Month](https://divicake.com/go/kinsta/)[Get up to 62% off Bluehost hosting.](https://divicake.com/go/wordpress-hosting-blue-host/)[Save Up to 15% on Rank Math](https://divicake.com/go/rank-math/)[Get 50% OFF on all WPForms plans](https://divicake.com/go/wpforms/) ## More in Divi Cake News [ 8 Free Graphic Design Tools Every Divi Designer Should Know Divi Cake News3 min read ### 8 Free Graphic Design Tools Every Divi Designer Should Know Eight free tools for logos, stock photos, fonts, icons, illustrations, font pairing, gradients and patterns that any Divi designer can use. 9 October 2026](https://divicake.com/blog/10-free-graphic-design-tools-every-divi-designer-should-know/) [ Top 7 AI Logo Generators in 2026: Which Fits Your Brand? Divi Cake News4 min read ### Top 7 AI Logo Generators in 2026: Which One Fits Your Brand Best? Choosing the right logo can be a real challenge. You want something memorable, visually appealing, and aligned with your brand identity but you may not have 2 October 2026](https://divicake.com/blog/top-7-ai-logo-generators-in-2026-which-one-fits-your-brand-best/) [ Kinsta Coupon or Discount: Is There a Better Deal in 2026? Divi Cake News3 min read ### Kinsta Coupon or Discount: Is There a Better Deal in 2026? A public Kinsta coupon is rare, so here is what actually lowers the bill: annual prepay discounts, free migrations, and agency credits worth asking for. 29 March 2026](https://divicake.com/blog/kinsta-coupon-discount/)