Create a radial background using Sass
Below is a simple Sass mixin I made for creating radial backgrounds. It should work on most browsers.
@mixin radial-gradient($from, $to) {
background: -moz-radial-gradient(center, circle cover, $from 0%, $to 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, $from), color-stop(100%, $to));
background: -webkit-radial-gradient(center, circle cover, $from 0%, $to 100%);
background: -o-radial-gradient(center, circle cover, $from 0%, $to 100%);
background: -ms-radial-gradient(center, circle cover, $from 0%, $to 100%);
background: radial-gradient(center, circle cover, $from 0%, $to 100%);
background-color: $from;
}
.radial {
@include radial-gradient(#555A5F, #000000);
}
The Sass mixin above will render the following CSS
.radial {
background: -moz-radial-gradient(center, circle cover, #555a5f 0%, black 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #555a5f), color-stop(100%, black));
background: -webkit-radial-gradient(center, circle cover, #555a5f 0%, black 100%);
background: -o-radial-gradient(center, circle cover, #555a5f 0%, black 100%);
background: -ms-radial-gradient(center, circle cover, #555a5f 0%, black 100%);
background: radial-gradient(center, circle cover, #555a5f 0%, black 100%);
background-color: #555a5f;
}