CSS3 Radial gradients syntax explanation

Question

Can someone explain the following radial gradient syntax and perhaps provide its equivalent in CSS3 standard format that works across modern browsers?

-webkit-radial-gradient( 50% 50%, 200% 50%, hsla(0, 0%, 90%, 1) 5%, hsla(0, 0%, 85%, 1) 30%, hsla(0, 0%, 60%, 1) 100%)

Answer 1

-webkit-radial-gradient(50% 50%, 
                        200% 50%, 
                        hsla(0, 0%, 90%, 1) 5%, hsla(0, 0%, 85%, 1) 30%, hsla(0, 0%, 60%, 1) 100%)

The radial-gradient provided above can be explained as follows:

• The gradient is a radial gradient which means the colors change in circular/elliptical path along a defined radius.
• The first parameter 50% 50% defines the position of the gradient image's center point. Here it is nothing but the center of the container element on which it is applied.
• The second parameter 200% 50% defines the radius of the gradient in X-axis and Y-axis. Here the radius is 200% of the container's width in X-axis and 50% of the container's height in Y-axis.
• The above setting along with the container's dimensions determine the shape of the gradient. If the container is 250px tall and 250px wide then the radius in X-axis would be 500px whereas the radius in Y-axis would be 125px and so the gradient would be elliptical. On the other hand if the container is 400px tall and 100px wide then the radius in X-axis would be 200px and the radius in Y-axis would also be 200px. So, the gradient's shape would be a circle.
• The next set of parameters define the colors and where they should end/stop. The gradient would have hsla(0, 0%, 90%, 1) as color till 5%, from 5% to 30% the color would gradually move from hsla(0, 0%, 90%, 1) to hsla(0, 0%, 85%, 1) and then from 30% to 100% it would move from hsla(0, 0%, 85%, 1) to hsla(0, 0%, 60%, 1).

---

The equivalent standard syntax for this radial-gradient would be the following:

background: radial-gradient(ellipse 200% 50% at 50% 50%, hsla(0, 0%, 90%, 1) 5%, hsla(0, 0%, 85%, 1) 30%, hsla(0, 0%, 60%, 1) 100%);

The below snippet has the output of both of them for comparison.

div {
  float: left;
  height: 250px;
  width: 250px;
  border: 1px solid black;
  margin-right: 4px;
}
.radial-grad {
  background: -webkit-radial-gradient(50% 50%, 200% 50%, hsla(0, 0%, 90%, 1) 5%, hsla(0, 0%, 85%, 1) 30%, hsla(0, 0%, 60%, 1) 100%);
}

.radial-grad-standard {
  background: radial-gradient(ellipse 200% 50% at 50% 50%, hsla(0, 0%, 90%, 1) 5%, hsla(0, 0%, 85%, 1) 30%, hsla(0, 0%, 60%, 1) 100%);
}

<div class='radial-grad'></div>

<div class='radial-grad-standard'></div>