(Firefox only) SVG gradients set up via SASS

_svg_gradient.scss

@function svg-gradient($type, $transform, $colors...) {
	$stops: "";
	@each $color, $offset in $colors {
		$stops: $stops + "<stop offset='#{$offset}' stop-color='#{$color}' />";
	}
	@return url(
		"data:image/svg+xml;utf8,\
		<svg xmlns='http://www.w3.org/2000/svg'> \
			<#{$type}Gradient id='grad' style='gradient-transform: #{$transform};'> \
				#{$stops} \
			</#{$type}Gradient> \
		</svg>"
		+ "#grad"
	);
}

circle {
  fill: svg-gradient(linear, rotate(90deg), black 0%, grey 50%, white 100%)
}