isotropic-2022
Share
Blog
Search
Menu

You Can Do Cool S**t With Oxygen Builder Background Gradients

By James LePage
 on April 12, 2022

You Can Do Cool S**t With Oxygen Builder Background Gradients

By James LePage
 on April 12, 2022

One of my favorite aspects of CSS is how you can layer CSS background images (already crazy flexible with positioning and tiling) and gradients to make really cool effects. We implement them in tons of projects and in this post, I wanted to cover some of the things you can use this Oxygen Builder feature to create.

Like this content? Join our Facebook Group (IsoGroup), subscribe to the newsletter, and check out our Oxygen Builder Course (coming soon).

Split (and responsive) Color and Photo Backgrounds

Our go to use case for this is building full-width split backgrounds with 50% a solid color and 50% an image. You could do this with 3 divs and flexbox, but the problem is that you won't be able to easily (and responsibly) maintain the maximum page width due to the way Oxygen handles sections.

isotropic-2022-04-12-at-13-43-21
Oxygen Section HTML

While you could absolutely position a div and assign the .ct-section-inner-wrap class in a div element set to be a section, using CSS gradients is typically much easier.

isotropic-2022-04-12-at-13-46-44

First, add a background image.

Then, add a gradient on top, like so:

isotropic-2022-04-12-at-13-48-14
Transparent color 50%, solid color 50%, same solid color 50%.

Because we use percentages, this is responsive. That means that we can overlay a CSS grid on top and toss some content into it.

If we use a standardized padding, we can even get fancy and use calc(50% - yourpadding) to position the background to "incorporate" padding.

isotropic-2022-04-12-at-13-50-07

We can also leverage the responsive breakpoints to change the positioning, colors and transparency of this effect depending on screen size (note: seems broken in Oxygen 4.0 Beta 2).

Split Color Backgrounds

The simplest effect is removing the background image and simply splitting a gradient between two colors.

isotropic-2022-04-12-at-13-41-00

By setting the positioning of both to 50%, there will be no fade. Instead, a hard transition between the two colors.

We can even do stripes. Keep in mind, this is fully responsive to 100vw if you use percentages.

isotropic-2022-04-12-at-13-42-04

This is really flexible. We can even implement hard transitions and fades on the same section:

isotropic-2022-04-12-at-13-43-53

And finally, if we add a background image, we can layer these effects on top of the image.

isotropic-2022-04-12-at-13-45-42
Just add a standard background image.

Multi Color Gradients

We can remove the hard stop, and merge colors together like so:

isotropic-2022-04-12-at-13-24-00-1

You can add as many as you'd like. When merging colors together, I typically leave the positioning blank.

Animate It

A really basic animation can be to simply move the background around. To do it, add the following CSS to the section with your gradient:

animation: Animation 5s ease infinite; background-size: 200% 200%;

Then, create the animation keyframes, and add it to your Universal Stylesheet:

@-webkit-keyframes Animation { 0%{background-position:10% 0%} 50%{background-position:91% 100%} 100%{background-position:10% 0%} } @-moz-keyframes Animation { 0%{background-position:10% 0%} 50%{background-position:91% 100%} 100%{background-position:10% 0%} } @keyframes Animation { 0%{background-position:10% 0%} 50%{background-position:91% 100%} 100%{background-position:10% 0%} }
isotropic-2022-04-12-at-13-32-51
Universal Animation
isotropic-2022-04-12-at-13-33-15

Because we doubled the size of the background gradient, I push the colors back into the center like so.

Gradient Border in Oxygen Builder

isotropic-2022-04-12-at-14-02-14
Code from this section sourced from this CodePen.

You can also add a gradient border to an element in Oxygen Builder by following this method. First, add your div.

Add a class to it of .gradient-border. Paste this code into the custom CSS:

--borderWidth: 3px; background: #1D1F20; position: relative; border-radius: 3px

Now, go the the :after state of this class.

isotropic-2022-04-12-at-13-59-11

Paste in the following custom CSS:

position: absolute; top: calc(-1 * var(--borderWidth)); left: calc(-1 * var(--borderWidth)); height: calc(100% + var(--borderWidth) * 2); width: calc(100% + var(--borderWidth) * 2); border-radius: calc(2 * var(--borderWidth)); z-index: -1;

Set the background gradient like normal, or simply paste this into the custom CSS of .gradient-border:after too:

background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
Code language: CSS (css)

Now, whenever you apply the class of .gradient-border to a div or element, the effect will be applied.

Animate It

You can animate it by adding:

-webkit-animation: animatedgradient 3s ease alternate infinite; animation: animatedgradient 3s ease alternate infinite; background-size: 300% 300%;

to .gradient-border:after, and

@-webkit-keyframes animatedgradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes animatedgradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

to your universal CSS.

This Is All CSS

You can use a tool like https://cssgradient.io/ to do this with pure CSS. This tool generates the CSS linear-gradient needed for gradients. All you do is copy/paste into the custom CSS field of a specific element in Oxygen.

isotropic-2022-04-12-at-13-10-37

You might also like reading:

Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!
We're looking for new authors. Explore Isotropic Jobs.
Close
🇺🇸 English
Save posts, access exclusive content, join members-only communities and more.
Dark Mode Toggle
Love web dev? Join the Isotropic weekly newsletter.
cross
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
0

Your Cart is Empty