blob: 099a57655cd577c37457ed54d6ffc99064d5883f [file] [log] [blame]
<!DOCTYPE html>
<!--
| Simple radial gradients. These are derived from example 17 here:
| https://www.w3.org/TR/2012/CR-css3-images-20120417/#radial-gradients
-->
<html>
<head>
<style>
.gradient1 {
background: radial-gradient(yellow, green);
width: 300px;
height: 60px;
}
.gradient2 {
background: radial-gradient(ellipse at center, yellow 0%, green 100%);
width: 300px;
height: 60px;
}
.gradient3 {
background: radial-gradient(farthest-corner at 50% 50%, yellow, green);
width: 300px;
height: 60px;
}
.gradient4 {
background: radial-gradient(circle, yellow, green);
width: 300px;
height: 60px;
}
.gradient5 {
background: radial-gradient(red, yellow, green);
width: 300px;
height: 60px;
}
</style>
</head>
<body>
<div class="gradient1"></div>
<div class="gradient2"></div>
<div class="gradient3"></div>
<div class="gradient4"></div>
<div class="gradient5"></div>
</body>
</html>