<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
div.first{
height:150px;
width:300px;
color:#fff;
background: radial-gradient(green, yellow, blue);
}
div.second{
height:150px;
width:300px;
color:#fff;
background: radial-gradient(circle,green, yellow, blue);
}
div.third{
color:#fff;
height:150px;
width:300px;
background:radial-gradient(at top left,blue , green , yellow);
}
div.fourth{
color:#fff;
height:150px;
width:300px;
background:radial-gradient(green 20%, yellow 50%,blue 80%);
}
div.fifth{
color:#fff;
height:150px;
width:300px;
background:radial-gradient(blue 20px, yellow 70px, green 150px);
}
</style>
</head>
<body>
<div class="first">default(ellipse)</div>
<div class="second">Circle</div>
<div class="third">position(top-left)</div>
<div class="fourth">color stops (position in percentage)</div>
<div class="fifth">color stops (position in pixels)</div>
</div>
</body>
</html>
OUTPUT
Comments
Post a Comment