Linear gradient
-
Linear 1
- -moz-linear-gradient (left, green, yellow);
- -webkit-gradient (linear, left center, right center, from(green), to(yellow));
-
Linear 2
- -moz-linear-gradient(45deg, green, yellow);
- -webkit-gradient(linear, left bottom, right top, from(green), to(yellow));
-
Linear 3
- -moz-linear-gradient(90deg, green, yellow, blue);
- -webkit-gradient(linear, center bottom, center top, from(green), color-stop(50%,yellow), to(blue));
-
Linear 4
- -moz-linear-gradient(90deg, green, yellow 25%, blue);
- -webkit-gradient(linear, center bottom, center top, from(green), color-stop(25%,yellow), to(blue));
Radial gradient
-
Radial 1
- -moz-radial-gradient(green, yellow);
- -webkit-gradient(radial, center center, 0, center center, 70.5, from(green), to(yellow));
-
Radial 2
- -moz-radial-gradient(40% 40%, farthest-side, green, yellow);
- -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 60, from(green), to(yellow));
-
Radial 3
- -moz-radial-gradient(40% 40%, closest-side, green, yellow);
- -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 40, from(green), to(yellow));
-
Radial 4
- -moz-radial-gradient(right top, green, yellow, blue);
- -webkit-gradient(radial, right top, 0, right top, 141, from(green), color-stop(50%, yellow), to(blue));
-
Radial 5
- -moz-radial-gradient(60% 60%,circle contain,yellow,green 75%,rgba(255,255,255,0));
- -webkit-gradient(radial,45% 45%,5,60% 60%,40,from(yellow),color-stop(75%, green),to(rgba(255,255,255,0)));
Back to post ‘CSS gradient syntax: comparison of Mozilla and WebKit’