Comparing CSS Gradient Color (trying it out with and without prefixes)

From the IE background maker tool, there are 3 basic types of gradient pattern shape : linear - circular - elliptical. The IE background maker provides pattern shapes with keywords value to set the direction. But in general, you can use degree to set the angle of it.
I put a demo of the keyword-valued-direction gradient patterns without using prefix and using complete set of the prefixes. Let's take a look.

Update (June 24, 2013)

---

I just looked again this post using Yandex and Safari. Turned out, they didn't show the gradient. Still needs the -webkit- prefix for gradient. Opera also still needs the -o- prefix. Google Chrome, Mozilla (Firefox), and IE 10 don't need the prefix anymore.

---

LINEAR GRADIENT

This is just
{background-image: linear-gradient(to bottom, #C3FFA6 0%, #007D19 100%);}

This is with complete set of prefixes
{background-image: -ms-linear-gradient(top, #C3FFA6 0%, #007D19 100%);
 background-image: -moz-linear-gradient(top, #C3FFA6 0%, #007D19 100%);
background-image: -o-linear-gradient(top, #C3FFA6 0%, #007D19 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #C3FFA6), color-stop(1, #007D19));
background-image: -webkit-linear-gradient(top, #C3FFA6 0%, #007D19 100%);
 background-image: linear-gradient(to bottom, #C3FFA6 0%, #007D19 100%);}

---

CIRCLE GRADIENT

This is just
{background-image: radial-gradient(circle farthest-corner at center, #C3FFA6 0%, #007D19 100%);}

This is with complete set of prefixes
{background-image: -ms-radial-gradient(center, circle farthest-corner, #C3FFA6 0%, #007D19 100%);
background-image: -moz-radial-gradient(center, circle farthest-corner, #C3FFA6 0%, #007D19 100%);
background-image: -o-radial-gradient(center, circle farthest-corner, #C3FFA6 0%, #007D19 100%);
background-image: -webkit-gradient(radial, center center, 0, center center, 506, color-stop(0, #C3FFA6), color-stop(1, #007D19));
background-image: -webkit-radial-gradient(center, circle farthest-corner, #C3FFA6 0%, #007D19 100%);
background-image: radial-gradient(circle farthest-corner at center, #C3FFA6 0%, #007D19 100%);}

---

ELLIPTICAL GRADIENT

This is just
{background-image: radial-gradient(ellipse farthest-corner at center, #C3FFA6 0%, #007D19 100%);}

This is with complete set of prefixes
{background-image: -ms-radial-gradient(center, ellipse farthest-corner, #C3FFA6 0%, #007D19 100%);
background-image: -moz-radial-gradient(center, ellipse farthest-corner, #C3FFA6 0%, #007D19 100%);
background-image: -o-radial-gradient(center, ellipse farthest-corner, #C3FFA6 0%, #007D19 100%);
background-image: -webkit-gradient(radial, center center, 0, center center, 506, color-stop(0, #C3FFA6), color-stop(1, #007D19));
background-image: -webkit-radial-gradient(center, ellipse farthest-corner, #C3FFA6 0%, #007D19 100%);
background-image: radial-gradient(ellipse farthest-corner at center, #C3FFA6 0%, #007D19 100%);}

---

If you do not see any differences on your desktop browser, then it's pretty much 'safe' to just use the non-prefixed gradient pattern. Well, not really, because there're those mobile browsers. You have to try them out too. I haven't. And also, those desktop browsers I mentioned above.
This is just a demo to minimize the CSS code line for desktop browser. To be 'more' safe, you can try Prefix Free by Lea Verou. A very cool JS plugin to automatically add prefixes to CSS properties when needed.

---

More information about gradient syntax at W3 Developers