Introduction
In this article you will learn about linear and radial gradients in CSS.
Support by all the latest browsers:
![brawser.jpg]()
Linear Gradients
Linear
gradient is a function like <-Linear-gradient ();> through this
function we can add multiple color in div from left, right, Bottom, top,
top left, top right, bottom left, bottom right etc and we can also make
image.
<!DOCTYPE html>
<html>
<head>
<title>gradient</title>
<style>
#main {
height: 200px;
width: 300px;
margin: 0px auto;
border: 1px solid #FF9933;
background: -webkit-linear-gradient(top, red 0%, blue 50%,lightpink 100%);
background: -moz-linear-gradient(top, red 0%, blue 50%,lightpink 100%);
background: -o-linear-gradient(top, red 0%, blue 50%,lightpink 100%);
background: -ms-linear-gradient(top, red 0%, blue 50%,lightpink 100%);
}
</style>
</head>
<body>
<div id="main">
</div>
</body>
</html>
Output
![3.jpg]()
background:-webkit-linear-gradient(left, #330066 0%, blue 50%, #663366 100%);
background:-moz-linear-gradient(left, #330066 0%, blue 50%, #663366 100%);
background:-ms-linear-gradient(left, #330066 0%, blue 50%, #663366 100%);
background:-o-linear-gradient(left, #330066 0%, blue 50%, #663366 100%);
Output
![4.jpg]()
background:-webkit-linear-gradient(topright,red8%,green30%,blue70%,lightpink90%);
background:-moz-linear-gradient(topright,red8%,green30%,blue70%,lightpink90%);
background:-o-linear-gradient(topright,red8%,green30%,blue70%,lightpink90%);
background:-ms-linear-gradient(topright,red8%,green30%,blue70%,lightpink90%);
Output
![2.jpg]()
Radial Gradient
Radial
gradient is a function like <-Radial-gradient ();> through
this function we can add multiple color in div and we can also
make image. Radial gradient have multiple Shape setting as like
closest-side,closest-corner,farthest-side, farthest-corner (cover) etc.
you can write :- background: -moz-radial-gradient(closest-corner, red, yellow 10%, #1E90FF 50%, white);
background:-moz-radial-gradient(circle,blue50%,#663366100%);
background:-webkit-radial-gradient(circle,blue50%,#663366100%);
background:-o-radial-gradient(circle,blue50%,#663366100%);
background:-ms-radial-gradient(circle,blue50%,#663366100%);
Output
![5.jpg]()
background:-webkit-radial-gradient( gray 50%, #663366 100%);
background:-moz-radial-gradient( gray 50%, #663366 100%);
background:-o-radial-gradient( gray 50%, #663366 100%);
background:-ms-radial-gradient( gray 50%, #663366 100%);
Output
![6.jpg]()
background:-webkit-radial-gradient(contain, #fff 0%, gray 50%, #663366 100%);
background:-moz-radial-gradient(contain, #fff 0%, gray 50%, #663366 100%);
background:-o-radial-gradient(contain, #fff 0%, gray 50%, #663366 100%);
background:-ms-radial-gradient(contain, #fff 0%, gray 50%, #663366 100%);
Output
![7.jpg]()
background:-webkit-radial-gradient(50%50%,circle,rgb(75,75,200),rgb(0,0,75))
background:-moz-radial-gradient(50%50%,circle,rgb(75,75,200),rgb(0,0,75));
background:-ms-radial-gradient(50%50%,circle,rgb(75,75,200),rgb(0,0,75));
background:-o-radial-gradient(50%50%,circle,rgb(75,75,200),rgb(0,0,75));
background:radial-gradient(circleat50%50%,rgb(75,75,200),rgb(0,0,75));
Output
![image.jpg]()
background:-webkit-repeating-radial-gradient(circle,#6578345px,#fff10px,#FF993330px);
background:-moz-repeating-radial-gradient(circle,#6578345px,#fff10px,#FF993330px);
background:-o-repeating-radial-gradient(circle,#6578345px,#fff10px,#FF993330px);
background:-ms-repeating-radial-gradient(circle,#6578345px,#fff10px,#FF993330px);
Output
![1.jpg]()