My SCSS mixin to give me a radial gradient over a linear gradient

compiled.css

.selector {
  background: #f8ab2f;
  background: -webkit-gradient(radial, 40% 0, 0, 100% 100%, 100,
                               color-stop(0, rgba(251, 215, 57, 0.5)),
                               color-stop(1, rgba(246, 128, 38, 0.5))),
              -webkit-gradient(linear, 0 0, 0 100%,
                               color-stop(0, #fbd739),
                               color-stop(1, #f68026));
  background: -webkit-linear-gradient(top, rgba(251, 215, 57, 0.5), rgba(246, 128, 38, 0.5)),
              -webkit-radial-gradient(40% 0, farthest-corner, #fbd739, #f68026);
  background:    -moz-linear-gradient(top, rgba(251, 215, 57, 0.5), rgba(246, 128, 38, 0.5)),
                 -moz-radial-gradient(40% 0, farthest-corner, #fbd739, #f68026);
  background:     -ms-linear-gradient(top, rgba(251, 215, 57, 0.5), rgba(246, 128, 38, 0.5)),
                  -ms-radial-gradient(40% 0, farthest-corner, #fbd739, #f68026);
  background:      -o-linear-gradient(top, #fbd739, #f68026);
  background:      -o-linear-gradient(top, rgba(251, 215, 57, 0.5), rgba(246, 128, 38, 0.5)),
                   -o-radial-gradient(40% 0, farthest-corner, #fbd739, #f68026);
  background:         linear-gradient(top, rgba(251, 215, 57, 0.5), rgba(246, 128, 38, 0.5)),
                      radial-gradient(40% 0, farthest-corner, #fbd739, #f68026);
}

complexgradient.scss

@mixin doublegradient($topcolor, $bottomcolor) {
  // fall back to a solid color
  background: mix($topcolor, $bottomcolor);
  // the more verbose webkit format is required by Safari so far
  background: -webkit-gradient(radial, 40% 0, 0, 100% 100%, 100,
                               color-stop(0, rgba($topcolor, 0.5)),
                               color-stop(1, rgba($bottomcolor, 0.5))),
              -webkit-gradient(linear, 0 0, 0 100%,
                               color-stop(0, $topcolor),
                               color-stop(1, $bottomcolor));
  // Chrome supports this Mozilla-style format - this is technically redundant since I
  // already specified the longer form above
  background: -webkit-linear-gradient(top, rgba($topcolor, 0.5), rgba($bottomcolor, 0.5)),
              -webkit-radial-gradient(40% 0, farthest-corner, $topcolor, $bottomcolor);
  // Mozilla-style linear gradient
  background:    -moz-linear-gradient(top, rgba($topcolor, 0.5), rgba($bottomcolor, 0.5)),
                 -moz-radial-gradient(40% 0, farthest-corner, $topcolor, $bottomcolor);
  // not 100% sure IE supports this yet
  background:     -ms-linear-gradient(top, rgba($topcolor, 0.5), rgba($bottomcolor, 0.5)),
                  -ms-radial-gradient(40% 0, farthest-corner, $topcolor, $bottomcolor);
  // Opera doesn't support radial gradients yet, so I gave it a linear-only
  // property that can get overridden later at a later date
  background:      -o-linear-gradient(top, $topcolor, $bottomcolor);
  // when they implement radial gradients, this should work
  background:      -o-linear-gradient(top, rgba($topcolor, 0.5), rgba($bottomcolor, 0.5)),
                   -o-radial-gradient(40% 0, farthest-corner, $topcolor, $bottomcolor);
  // this looks like it will be the final standard
  background:         linear-gradient(top, rgba($topcolor, 0.5), rgba($bottomcolor, 0.5)),
                      radial-gradient(40% 0, farthest-corner, $topcolor, $bottomcolor);
}