jeandremelaria
11/1/2017 - 3:07 PM

CSS3 - Gradient


#grade1{
	width:500px;
	height:200px;
	background:blue;/*to show color if browser doesn't support gradient */
	background:linear-gradient(blue, black);/* U can add more colors */
}

// Starts from the right
#grade1{
	width:500px;
	height:200px;
	background:blue;/*to show color if browser doesn't support gradient */
	background:linear-gradient(to right, blue, black);/* U can add more colors */
}

// Starts from the bottom right
#grade1{
	width:500px;
	height:200px;
	background:blue;/*to show color if browser doesn't support gradient */
	background:linear-gradient(to  bottom right, blue, black);/* U can add more colors */
}

// Radial gradient
#grade1{
	width:500px;
	height:200px;
	background:blue;/*to show color if browser doesn't support gradient */
	background:radial-gradient(blue, black, white);/* U can add more colors */
}

#grade2{
	width:500px;
	height:200px;
	background:blue;/*to show color if browser doesn't support gradient */
	background:repeating-radial-gradient(circle, blue 5%, black 15%, white 60%);/* U can add more colors */
}