In the CSS3 we can add multiple gradients as the background to an element by listing the gradient definitions separated by commas. The gradients are applied in reverse order, with the first one appearing in front. 

Because gradients normally fill the entire background, you need to set the final color stop to transparent on gradients that appear in front. Alternatively, you can control the size and position of individual gradients with the background-size and background-position properties. 

Radial gradients using the standard syntax are particularly suited for use as multiple gradients because the radial-gradient() function allows you to set the size of the gradient precisely using lengths (for both circles and ellipses) or percentages (for ellipses).


The example of multiple color stops with gradient techniques (ball effect):


›› go to examples ››