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.

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.

First, add a background image.

Then, add a gradient on top, like so:

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.

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.

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.

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

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

Multi Color Gradients

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

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:

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

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

Gradient Border in Oxygen Builder

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:

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

Paste in the following custom CSS:

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:

to .gradient-border:after, and

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.

You might also like reading: