How to Create Background Gradients (Using Custom CSS)

Hey all!

In this post/video, I show you how you can create awesome customizable background gradients on any element that has a background in ClickFunnels using custom CSS!

This can also work with some of our earlier videos, such as how to create hovering effects or how to add any borders to any elements also in ClickFunnels using custom CSS.

Make sure to watch them all so you can combine parts together and create cool multiple effects!

Anyways, in order to create gradients on your background, you need to simply select the element again and get the CSS element ID, like we usually do. Then you need to paste that ID into your custom CSS panel and put in the following declaration: ‘background:linear-gradient(to right, red, blue);’. What this does is put a linear gradient going in a line from one side to another, or from left to right in this case. The color also changes from red to blue in this example.

You can add additional and as many colors as you like and the background will split them all evenly, so if you want to add more colors, simply add them all in separated by a comma into your custom CSS code. You can also use hex codes or RGB(a) codes for colors instead. I prefer using the rgba code because I can then input transparency as well (or alpha in this case) to my colors, creating cool transparency-color changing effects as well. So if I want to change my color from transparent red to clear red, I would input this for example: ‘linear-gradient(to right, rgba(255,0,0,0.5),rgba(255,0,0,1)’, specifying that I want my gradient to go from left to right from a red that is 50% transparent to one that is 100% clear.

In addition to specifying direction, such as ‘to right’, ‘to left’, ‘to top right’, etc… you can also specify the direction in degrees. So if you want the gradient to go from bottom to top, you would say ‘0deg’ instead of writing the direction, saying that you want the gradient to go from the center of that angle up north. This allows you to really customize your options as you would have 360 different directions for your gradient!

You can also include circular and elliptical gradients, not only linear, by saying ‘radial-gradient’ instead of ‘linear-gradient’. You would follow the exact same steps with this as you would for linear gradient in your ClickFunnels custom CSS. You can also specify the placement of your circle or ellipse by saying something like ‘circle at right’ or ‘circle at bottom left’, indicating where you want that circle to be radiating it’s energy.

There are a few other cool things you can do with these gradients in ClickFunnels custom CSS, one of them being able to place the gradient anywhere you want on the gradient line. By saying something like ‘to right,red 10%,blue 20%’, you are saying that you don’t want the color lines evenly distributed – instead, you want the red color line to start at 10% of the line, and the blue one at 20%. This will also allow you to create repeating gradient patterns since you can create more of these gradients on the same background. All you would have to do is input ‘repeating-linear(or radial)-gradient’ into your ClickFunnels CSS and the gradients would repeat themselves!

Another thing I forgot to mention in the video is that if you want to have specific line breaks in your gradient, you can just make the colors stop at the exact same percentage as the next color in the list. So for example if I say something like ‘to right,red 50%, blue 50%’, this will basically create 2 boxes, the one of the left red, and the right one blue, since the color lines will literally be right on top of each other.

That’s it!

Please subscribe and stay tuned for future videos where we go over the technical how-to’s and dig deeper into other affiliate marketing tools!

If you are interested in ClickFunnels, or want to learn more, feel free to check out their free 14-day trial under my affiliate link at:

If you like GetResponse and want to learn more, try out their 30-day free trial under my affiliate link at:

If you are interested in ClickMagick, or want to learn more, feel free to check out their free 14-day trial under my affiliate link at:

Here is my Namecheap affiliate link as well if you want to buy one of their really cheap domains and/or private email:

Thanks for watching, and I’ll see you in the next video!

2 Replies to “How to Create Background Gradients (Using Custom CSS)”

  1. Pingback: Creating Color Gradient Text Using Custom CSS (On Some Browsers) – Affiliate Marketing Essentials

  2. Pingback: How to Add Animations (Using Custom CSS) – Affiliate Marketing Essentials

Leave a Reply