How to add Gradient colors to a page.

Gradient colors are a great way to customize a page. In this article, you will learn an easy way to add gradient colors to a page within minutes. 

Watch Video: https://www.loom.com/share/cba22391170c4dd98dd2777788260aea

Video Recap: 
There are many free online sources that provide the custom code required to add a gradient effect on a page/site. The one used in this example is uigradients.

(Please keep in mind that ClickFunnels does not own nor sponsor this brand. You can use the code provider of your choice and any technical issue with their code would need to be dealt with directly with them and not ClickFunnels Support). 

Adding CSS Code To Page
Once you select the color combination you want, you can copy the CSS code and paste it in the Custom CSS field in your page editor as seen here: https://d.pr/LPVabu. 



In order for the CSS code to properly function, curly brackets/braces symbols { } must be added at the beginning and end of the code.

See the example below: 

{background: #bc4e9c;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #f80759, #bc4e9c);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #f80759, #bc4e9c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

If you want to add the gradient colors to a button, you must type ".elButton" above the code. To add gradient colors to other areas such as sections or rows, you must copy the CSS ID Selector for each section/row and add it above the code as well as shown here in this screenshot: https://d.pr/Q77TIt 


Be sure to always click Save after making any changes. 

Important Note: Due to the custom and varying nature of CSS code, our support team is unable to provide assistance with any custom code added to your page. If you experience troubles while setting up your custom CSS, please consult a qualified developer to assist you.