Different syntax for radial gradient

I’m only questioning Firefox at this time since I’m focusing on -moz.

Why are there some many syntax variations for radial gradients?

In the code below 2 of the 3 background image properies work. The -moz prefix and the first non -moz syntax is different, but still seem to produce the same result. The second non -moz has the same syntax as the -moz but doesn’t render results.

Should I just pick one that works and move on? Why such subtle variations? Especially that one non -moz works and one doesn’t?


                background-image: -moz-radial-gradient(45px 45px, circle cover, yellow 0%, orange 100%);
                background-image: radial-gradient(circle farthest-corner at 45px 45px , yellow 0%, orange 100%);
                background-image: radial-gradient(45px 45px, circle cover, yellow 0%, orange 100%);


<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <style type="text/css">
            #icons li{
                float: left;
                list-style: none;
                margin-right: 10px;
            }
            #icons a{
                display: block;
                position: relative;
                text-indent:-9999em;
            }
            #icons a:before, #icons a:after{
                content: "";
                display: block;
                position: absolute;
            }
            .circleBg{
                /*background-image: -moz-radial-gradient(45px 45px, circle cover, yellow 0%, orange 100%, red 95%);*/
                background-image: radial-gradient(circle farthest-corner at 45px 45px , yellow 0%, orange 100%);
                /*background-image: radial-gradient(45px 45px, circle cover, yellow 0%, orange 100%);*/
                
                -webkit-border-radius: 50%;
                   -moz-border-radius: 50%;
                        border-radius: 50%;
                
                height: 56px;
                width: 56px;
            }
        </style>
    </head>
    <body>
        <ul id="icons">
            <li><a class="circleBg" href="#">Circle Background</a></li>
        </ul>
    </body>
</html>

CSS gradients are still in an experimental phase, so we don’t know for sure what the final syntax will be. So for now, if you must use them, choose whatever works.