Webkit Gradient syntax

Question

I've been reading about the -webkit-gradient property and I don't understand it.

Radial:

-webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)),

What does 105 105, 20, 112 120, 50 mean?

Linear:

background: -webkit-gradient(linear, 40 50, 50 50, color-stop(0.0, yellow),
            color-stop(0.5, orange), color-stop(1.0, red));

What does 40 50, 50 50 mean?

Answer 1

Webkit gradient documentation

For a radial gradient, the first two arguments represent a start circle with origin (x0, y0) and radius r0, and the next two arguments represent an end circle with origin (x1, y1) and radius r1.

So for radial: "105 105, 20, 112 120, 50", it's a circle starting at 105px left and 105px top with a radius of 20px and ending at a circle 112px left and 120px top with a radius of 50px;

For linear: "40 50, 50 50", start at 40px left 50px top, and continue to 50px left 50px top.