Multiple color stops with gradients

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).

Example

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

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
    position: relative; float: left;
    width: 150px; height: 150px; margin: 20px;
    border-radius: 50%;
    background-color: #fff71c;
    background-image: radial-gradient(circle 18px at 37px 45px, rgba(255,255,255,0.8), transparent), radial-gradient(circle at 30% 30%, #fff71c, #d9d223, #a8a668);
}
div+div {
	background-color: #C51D31;
    background-image: radial-gradient(circle 18px at 37px 45px, rgba(255,255,255,0.8), transparent), radial-gradient(circle at 30% 30%, #C51D31, #921524, #450A11);
}
/* ADD proprietary selectors if needed */
</style>
</head>
  
<body>

<h3>How to create a ball effect with CSS3 gradients?</h3>

<div>
</div>
<div>
</div>

</body>
</html>

›› go to examples ››

Multiple color stops with gradients

Example

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

Comments

About

Contact

Get Connected