<!DOCTYPE html>
<html>
<head>
<title>Linear Gradient</title>
<style>
div.first{
float:left;
width: 300px;
height:100px;
color:#fff;
background:linear-gradient(
Red, yellow, blue, green, white);
}
div.second{
float:left;
width: 300px;
height:100px;
color:#fff;
background:linear-gradient(
Red 10%, yellow 40%, blue 70%);
}
div.third{
float:left;
width: 300px;
height:100px;
color:#fff;
background:linear-gradient(to right,
Red, yellow, blue, green);
}
div.fourth{
float:left;
width: 300px;
height:100px;
color:#fff;
background:linear-gradient(to top left,
Red, yellow, blue, green);
}
div.fifth{
float:left;
width:300px;
height:100px;
color:#fff;
background:linear-gradient(190deg,blue, green,white);
}
div.sixth{
float:left;
width:300px;
height:100px;
color:#fff;
background: repeating-linear-gradient(190deg,blue, green,white 50px);
}
</style>
</head>
<body>
<div class="first">simple linear gradient</div>
<div class="second">color stops</div>
<div class="third">direction(to right)</div>
<div class="fourth">direction(to top left)</div>
<div class="fifth">190 deg</div>
<div class="sixth">repeating linear gradient</div>
</body>
</html>
OUTPUT
Comments
Post a Comment