Gradient Effect

A gradient effect is a graphical effect that produces a three dimensional color look by blending one color into another. In this effect more than one color is used, where one color gradually fades and changes to the other color. Adding a Gradient Effect to your background will give the background fusion of colors.

How To Add Gradient

To apply gradient effect in the background, follow these steps:

  • Go to the mini-toolbar of section or row or column, mainly where you want the gradient effect.
  • Select the settings icon
  • Go to Styles tab
  • Select Background
  • From there select Gradient


Solid Colors in Background

Currently there is two color blending option available. That means, you can use two colors for now.

  • Color 1 - Color 1 is the first you want to insert for the effect. You can use a light color or a dark, that’s up to you.
  • Color 2 - Color 2 is the second color you want to insert for the color. Choose both the colors in a great contrast.
  • Gradient Type - This option will allow you to set the type of gradient you want to use. There are two options available- Linear and Radial. Linear is the progress from one color to another in a single series. And radial is the colors arranged in a rays of a circle showing color 1 is surrounded by color 2.
  • Gradient Direction - Gradient direction will set the direction of the colors. In case of linear position, you’ll find a scroll bar. Just drag and adjust the way you want. And for radial, a drop-down option is available. You can select the direction from there.
  • Starting Position - Starting position scroll bar will allow you to set the starting position of the gradient effect. As the number increases, the effect of color 1 will also increase along with it.
  • Ending Position - Ending position scroll bar will allow you to set the blurring between the two colors. If you want, you can set two solid colors diagonally or blend them into a shady mood.

Gradient Over Image Settings

You can even set gradient effect over an image. This will take the design in to next level. And there is opacity scroll bar available for controlling the transparency. image

Joomla SEO Service

Grow rapidly with our Joomla SEO service done by the veterans

With over 12 years of business and a vast array of Joomla templates and extensions, we know Joomla SEO better than anyone you could possiblly hire.

Improve my ranking
On This Page