Published on October 2, 2022

Tutorial: How To Create & Implement More Beautiful Gradients In WordPress Using Oxygen

In this video tutorial, we’ll explore beyond Oxygen’s built-in gradient background tool. Instead, we will use the Gradient Generator Tool from Learn UI Design to create a more advanced and beautiful gradient for your WordPress website with Oxygen.

Once we have our gradient, we’ll add it to a Section using the Custom CSS tab. Next, we’ll create an Oxygen class to apply the gradient to multiple elements. Then, we’ll create a second class that utilizes additional CSS so that we can apply our gradient to text.

Resources:

  • Text gradient CSS: https://gist.github.com/Spellhammer/ffdcac30ea38462ad022e36712d7ec3f
  • CSS generator tool: https://www.learnui.design/tools/gradient-generator.html
  • Using Linear Gradient in CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient

 

The Oxygen Team
Updated on: October 2, 2022

You'll build incredible websites with Oxygen

Get started with Oxygen today and unlock incredible value.

Get Oxygen

30-day money back gurantee

Try Oxygen risk-free. If you’re not satisfied, get a full refund within 30 days.

Unlimited site license

Use Oxygen on as many personal or client projects as you want — no limits.

Fast, world-class support

Our experienced team is eager to assist you with technical questions.

Use on client websites

Build and deliver professional-grade websites for your clients with no extra fees.