Oxygen Builder Gradient Effects Tutorial Using CSS

Written by
Fabrizio Van Marciano
Last updated on
June 27, 2022

Welcome to another Oxygen Builder tutorial, and this one you're going to love. I'll show you how to add some cool gradient effects to your text, such as headings using simple CSS. Let's go.

One of the reasons I love using Oxygen Builder so much is because of its creative flexibility. This is not only a drag-and-drop website builder; you can really dive into the core of your design using your own custom code, such as HTM and CSS.

So, in the video tutorial below, we'll create a simple text header using one of Oxygen Builder elements, then apply a custom class to it. We'll then use some CSS in our stylesheet to create our gradient effect.

Don't worry, this is not technical at all. Even with limited knowledge of CSS, you should be able to do this for your site.

To save you some time, I've included the basic CSS below. Feel free to play around with it to get the desired effects for your text. Also, don't forget to change the class name.

.custom-class {
     background: linear-gradient(45deg,#000000,#ffffff);
     opacity: 0.9;
     -webkit-text-fill-color: transparent;
     -webkit-background-clip: text;

Of course, you can do this without using CSS. The effects panel contains plenty of options for adding effects to elements such as backgrounds and text. But, this tutorial is for CSS only.

Using gradient effects in text

Modern web design has many fads and trends. Some come and stay; some vanish without a trace.

Gradient text effects should be used only in the right places and sparingly. Not every element on your website should have a gradient effect. That said, when used correctly, they can be effective against image backgrounds with dark overlays, like the one seen in the video above.

Tools you need to start your own website

  1. Siteground Hosting (Affiliate link)
  2. WordPress: https://wordpress.org
  3. Thrive Suite (Affiliate link)

More Oxygen Builder tutorials?

If you're interested in checking out more WordPress and Oxygen Builder tutorials, here is the Oxygen Builder Playlist link on my channel.

Don't forget to head over to my YouTube channel and subscribe for future updates.

Need help with your Oxygen and WordPress website?

I provide WordPress website design and development services. I have over ten years of experience working with WordPress and two years working with Oxygen Builder. Click here to learn more.

Affiliate Disclaimer: This page contains affiliate links. This means if you click on one of these links and make a purchase of a product or service, I will be paid a small commission, at no additional cost to you. Thanks for your support.

Oxygen Builder Web Design Course

Learn how to build an awesome website for your business with my complete, Ultimate WordPress + Oxygen Builder Web Design Video Course

Website designed by Fabrizio


Web Design CourseCode Shop


Copy link