sass

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;
}

more CSS posts