CSS3 Linear Gradient

We can create gradient color with CSS3 and here how to achieve it.

Gradient Start Position

Code

div {
	/*Official Syntax*/
	background-image: linear-gradient(top, #ff5a00, #FFAE00);

	/*Browser Syntax*/	
	background-image: -webkit-linear-gradient(top, #ff5a00, #FFAE00);
	background-image: -moz-linear-gradient(top, #ff5a00, #FFAE00);
	background-image: -o-linear-gradient(top, #ff5a00, #FFAE00);
	background-image: -ms-linear-gradient(top, #ff5a00, #FFAE00);	
}

Code

div {
	/*Official Syntax*/
	background-image: linear-gradient(bottom, #ff5a00, #FFAE00);

	/*Browser Syntax*/
	background-image: -webkit-linear-gradient(bottom, #ff5a00, #FFAE00);
	background-image: -moz-linear-gradient(bottom, #ff5a00, #FFAE00);
	background-image: -o-linear-gradient(bottom, #ff5a00, #FFAE00);
	background-image: -ms-linear-gradient(bottom, #ff5a00, #FFAE00);
}

Code

div {
	/*Official Syntax*/
	background-image: linear-gradient(left, #ff5a00, #FFAE00);

	/*Browser Syntax*/
	background-image: -webkit-linear-gradient(left, #ff5a00, #FFAE00);
	background-image: -moz-linear-gradient(left, #ff5a00, #FFAE00);
	background-image: -o-linear-gradient(left, #ff5a00, #FFAE00);
	background-image: -ms-linear-gradient(left, #ff5a00, #FFAE00);
}

Code

div {
	/*Official Syntax*/
	background-image: linear-gradient(right, #ff5a00, #FFAE00);

	/*Browser Syntax*/
	background-image: -webkit-linear-gradient(right, #ff5a00, #FFAE00);
	background-image: -moz-linear-gradient(right, #ff5a00, #FFAE00);
	background-image: -o-linear-gradient(right, #ff5a00, #FFAE00);
	background-image: -ms-linear-gradient(right, #ff5a00, #FFAE00);
}

Diagonal Gradient

Code

div {
	/*Official Syntax*/
	background-image: linear-gradient(45deg, #ff5a00, #FFAE00);	

	/*Browser Syntax*/
	background-image: -webkit-linear-gradient(45deg, #ff5a00, #FFAE00);
	background-image: -moz-linear-gradient(45deg, #ff5a00, #FFAE00);
	background-image: -o-linear-gradient(45deg, #ff5a00, #FFAE00);
	background-image: -ms-linear-gradient(45deg, #ff5a00, #FFAE00);
}

Gradient Color Stop

Code

div {
	/*Official Syntax*/
	background-image: linear-gradient(top, #ff5a00 50%, #FFAE00 51%);

	/*Browser Syntax*/
	background-image: -webkit-linear-gradient(top, #ff5a00 50%, #FFAE00 51%);
	background-image: -moz-linear-gradient(top, #ff5a00 50%, #FFAE00 51%);
	background-image: -o-linear-gradient(top, #ff5a00 50%, #FFAE00 51%);
	background-image: -ms-linear-gradient(top, #ff5a00 50%, #FFAE00 51%);	
}

Transparent Gradient

Code

div {
	/*Official Syntax*/
	background-image: linear-gradient(to bottom,  rgba(255,90,0,0.5) 0%,rgba(255,174,0,0.5) 100%);

	/*Browser Syntax*/
	background-image: -moz-linear-gradient(top,  rgba(255,90,0,0.5) 0%, rgba(255,174,0,0.5) 100%);
	background-image: -webkit-linear-gradient(top,  rgba(255,90,0,0.5) 0%,rgba(255,174,0,0.5) 100%);
	background-image: -o-linear-gradient(top,  rgba(255,90,0,0.5) 0%,rgba(255,174,0,0.5) 100%);
	background-image: -ms-linear-gradient(top,  rgba(255,90,0,0.5) 0%,rgba(255,174,0,0.5) 100%);
}

Mulitple Color Gradient

Code

div {
	background-image: -webkit-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);
	background-image: -moz-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);
	background-image: -o-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);
	background-image: -ms-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);
	background-image: linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);
}