CSS: Gradients

CSS gradients let you display smooth transitions between two or more specified colours.

Here is a useful CSS Gradient Generator – https://cssgradient.io

2 Colours – Vertical


background: rgb(0,0,0);
background: -moz-linear-gradient(0deg, #000000 0%, #FFFFFF 100%);
background: -webkit-linear-gradient(0deg, #000000 0%, #FFFFFF 100%);
background: linear-gradient(0deg, #000000 0%, #FFFFFF 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#ffffff",GradientType=1);

2 Colours – Horizontal


background: rgb(0,0,0);
background: -moz-linear-gradient(90deg, #000000 0%, #FFFFFF 100%);
background: -webkit-linear-gradient(90deg, #000000 0%, #FFFFFF 100%);
background: linear-gradient(90deg, #000000 0%, #FFFFFF 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#ffffff",GradientType=1);