1. Home
  2. Rik
  3. Gradient Color Background

Gradient Color Background

Gradient Background used in 4 sections. Header, How it works section, Newsletter Subscription and Download section.

It is more easy to change transparent color for the template. Please follow easy steps to change your desired color.


  1. Goto less/color directory.
  2. Duplicate any of .less file.
  3. Now simply change your desired color and assign it with @main_color-1  and @main_color-2 veriable.ric-gradient-1
  4. Save and compile the .less file with any preprocessor application. It will do all rest of works for you.
  5. Now final step: link it to index.html

If you don’t wanna go through the steps above, you simply can duplicate or edit any of .css files among them and simply replace HEX with your color. That’s it! So easy right? But we recommend less because Less is More


Transparent Color Overlay:

To make background images more visible simply add opacity in .overlay-color. 15% transparency ( used image-bg and video-bg ) and another .overlay-color-full  0% transparency( used gradient-bg ) Let me show you an example:

Goto less/color directory, open designed file to edit:


Was this article helpful to you? Yes 1 No 1