<![CDATA[ <head>
<meta charset = "utf-8">
<title> Radial Gradients </title>
<style type = "text/css">
div {
height: 200px;
}
/*** CIRCLE EXAMPLES ***/
#centerCircle {
background: radial-gradient(circle at center, red, black, limegreen); }
#topCircle {
background: radial-gradient(circle at top, red, black, limegreen); }
#leftCircle {
background: radial-gradient(circle at left, red, black, limegreen); }
#bottomCircle {
background: radial-gradient(circle at bottom, red, black, limegreen); }
#rightCircle {
background: radial-gradient(circle at right, red, black, limegreen); }
/*** ELLIPSE EXAMPLES ***/
#centerEllipse {
background: radial-gradient(ellipse at center, red, black, limegreen); }
#topEllipse {
background: radial-gradient(ellipse at top, red, black, limegreen); }
#leftEllipse {
background: radial-gradient(ellipse at left, red, black, limegreen); }
#bottomEllipse {
background: radial-gradient(ellipse at bottom, red, black, limegreen); }
#rightEllipse {
background: radial-gradient(ellipse at right, red, black, limegreen); }
/*** SIZING EXAMPLE ***/
#fitCircle {
background: radial-gradient(circle 100px at center, red, black, limegreen); }
#sizedEllipse {
background: radial-gradient(ellipse 50% 30% at center, red, black, limegreen); }
#colorStops {
background: radial-gradient(circle at center, red 25%, black 35%, limegreen); }
/*** GRADIENT SPREAD EXAMPLES ***/
#closestSide {
background: radial-gradient(circle closest-side at 70% 60%, red, limegreen, black); }
#farthestSide {
background: radial-gradient(circle farthest-side at 70% 60%, red, limegreen, black); }
#closestCorner {
background: radial-gradient(circle closest-corner at 70% 60%, red, limegreen, black); }
#farthestCorner {
background: radial-gradient(circle farthest-corner at 70% 60%, red, limegreen, black); }
/*** REPEATING GRADIENT ***/
#repeatingRadial {
background: repeating-radial-gradient(red, limegreen 10%, black 15%); }
#repeatingLinear {
background: repeating-linear-gradient(to bottom right, #004C55 20%, #FFFFFF 25%, #A5ACAF 30%, #000000 35%);
</style>
</head>
<body>
<!-- CIRCLE EXAMPLES -->
<p>Circle at Center</p>
<div id = "centerCircle"></div>
<p>Circle at Top</p>
<div id = "topCircle"></div>
<p>Circle at Left</p>
<div id = "leftCircle"></div>
<p>Circle at Bottom</p>
<div id = "bottomCircle"></div>
<p>Circle at Right</p>
<div id = "rightCircle"></div>
<!-- ELLIPSE EXAMPLES -->
<p>Ellipse at Center</p>
<div id = "centerEllipse"></div>
<p>Ellipse at Top</p>
<div id = "topEllipse"></div>
<p>Ellipse at Left</p>
<div id = "leftEllipse"></div>
<p>Ellipse at Bottom</p>
<div id = "bottomEllipse"></div>
<p>Ellipse at Right</p>
<div id = "rightEllipse"></div>
<!-- SIZING EXAMPLE -->
<p>Specifying Circle pixel size</p>
<div id = "fitCircle"></div>
<p>Specifying Ellipse % size</p>
<div id = "sizedEllipse"></div>
<p>Example of Color Stops</p>
<div id = "colorStops"></div>
<!-- GRADIENT SPREAD EXAMPLES -->
<p>Circle at closest-side</p>
<div id = "closestSide"></div>
<p>Circle at farthest-side</p>
<div id = "farthestSide"></div>
<p>Circle at closest-corner</p>
<div id = "closestCorner"></div>
<p>Circle at farthest-corner</p>
<div id = "farthestCorner"></div>
<!-- REPEATING GRADIENT EXAMPLES -->
<p>Repeating Radial Gradient</p>
<div id = "repeatingRadial"></div>
<p>Repeating Linear Gradient</p>
<div id = "repeatingLinear"></div>
</body>
</html>
]]>