Add a gradient color to flatsome website

Do you want to add a gradient color to flatsome website ?

Important thing to add gradient color is how to create a gradient color. So, for this we will use a amazing website called ColorSpace.

So, to create the gradient color you have to visit https://mycolor.space/gradientafter going there you have to enter the color of your choice. In this demo I will enter the random color but, you can add any color you want.

So, let’s start

Step 1

You have to visit https://mycolor.space/gradient and create the color code. If you are not able to create please watch the below video for reference.

Please note you may also find other gradient color creator website simply entering gradient color creator website on google

Step 2

Now you have to go to your flatsome website and add a section. In below video, if you will watch, I have added a UX block.

Once you add the section add a class to that section. I have added class as “test”.

Step 3

Now the last step is you have to copy the color code which you have created on ColorSpace and add it to your Custom CSS section.

My CSS code looks like below code.test { background-image: linear-gradient(to right top, #000000, #2a0e1d, #49113d, #601b69, #6530a0, #6d4bbe, #7365db, #777ff9, #a09dfb, #c3bdfd, #e2ddfe, #ffffff); }

You may watch below video to see how I add gradient color to my website’s section

That’s it this is how you will be able to add gradient color to your section and similarly you can also add gradient color to your rows, column and banner. One thing will be common in allthat is you have to give a class to every banner, column,row or section where you have to show gradient background.

Friends that’s it from me and now if you have any other tricks to add gradient color in flatsome website please do let me know in comments.