Webkit gradient syntax, i dont understand.

Question

i been reading bout the webkit gradient syntax and i dont undestand.

for radial one, example

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

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

for linear one, example

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?

anyone can help?

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.