Using gradiants in background-image css property


In this tutorial I will show you that how can we use gradient in background css property

Light Linear
Dark Linear
Light Radial
Dark Radial
.grad-light-linear {
    background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
    background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
    background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
    background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
    background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
}

.grad-dark-linear {
    background-image: -webkit-linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,0));
    background-image: -moz-linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,0));
    background-image: -o-linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,0));
    background-image: -ms-linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,0));
    background-image: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,0));
}

.grad-light-radial {
    background-image: -webkit-radial-gradient(center 0, circle farthest-corner, rgba(255,255,255,0.4), rgba(255,255,255,0));
    background-image: -moz-radial-gradient(center 0, circle farthest-corner, rgba(255,255,255,0.4), rgba(255,255,255,0));
    background-image: -o-radial-gradient(center 0, circle farthest-corner, rgba(255,255,255,0.4), rgba(255,255,255,0));
    background-image: -ms-radial-gradient(center 0, circle farthest-corner, rgba(255,255,255,0.4), rgba(255,255,255,0));
    background-image: radial-gradient(center 0, circle farthest-corner, rgba(255,255,255,0.4), rgba(255,255,255,0));
}

.grad-dark-radial {
    background-image: -webkit-radial-gradient(center 0, circle farthest-corner, rgba(0,0,0,0.15), rgba(0,0,0,0));
    background-image: -moz-radial-gradient(center 0, circle farthest-corner, rgba(0,0,0,0.15), rgba(0,0,0,0));
    background-image: -o-radial-gradient(center 0, circle farthest-corner, rgba(0,0,0,0.15), rgba(0,0,0,0));
    background-image: -ms-radial-gradient(center 0, circle farthest-corner, rgba(0,0,0,0.15), rgba(0,0,0,0));
    background-image: radial-gradient(center 0, circle farthest-corner, rgba(0,0,0,0.15), rgba(0,0,0,0));
}

admin