Gradient in CSS

Introduction

In this article, you will learn about linear and radial gradients in CSS.

Support by all the latest browsers:

Linear Gradients

Linear gradient is a function like <-Linear-gradient ();> through this the function we can add multiple colors 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

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

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

Radial Gradient

Radial gradient is a function like <-Radial-gradient ();> through this function we can add multiple colors in div and we can also make an 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

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

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

background:-webkit-radial-gradient(50%50%,circle,#4b4bc8,#00004b)
background:-moz-radial-gradient(50%50%,circle,#4b4bc8,#00004b);
background:-ms-radial-gradient(50%50%,circle,#4b4bc8,#00004b);
background:-o-radial-gradient(50%50%,circle,#4b4bc8,#00004b);
background:radial-gradient(circleat50%50%,#4b4bc8,#00004b);

Output

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