<!
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Radial
gradients</title> <style> html { background: -webkit-radial-
gradient(green, yellow); background: radial-gradient(green,
yellow); height: 100%; } body { font: 14px/1.5 courier; color:
#000; } p { width: 300px; height: 150px; padding: 20px; margin:
20px 0 0 20px; float: left; border: 1px solid green; } #gradient1 {
background: #888 url(images/[Link]); /* Background
images can be used for browsers that aren't capable of producing
gradients */ background: -webkit-radial-gradient(yellow, green); /*
Backup for major browsers that can still handle gradients */
background: radial-gradient(yellow, green); /* The CSS3 standard */
} #gradient2 { background: -webkit-radial-gradient(circle, yellow,
green); background: radial-gradient(circle, yellow, green); }
#gradient3 { background: -webkit-radial-gradient(circle closest-
side, yellow, green); background: radial-gradient(circle closest-
side, yellow, green); } #gradient4 { background: -webkit-radial-
gradient(top left, yellow, green); background: radial-gradient(at
top left, yellow, green); } #gradient5 { background: -webkit-
repeating-radial-gradient(#8d0, #0d0 10px, #9f0 10px, #0f0 20px);
background: repeating-radial-gradient(#8d0, #0d0 10px, #9f0 10px,
#0f0 20px); } #gradientCollie { width: 120px; height: 90px;
padding: 50px 60px; border-radius: 120px/95px; background: -webkit-
radial-gradient(white 50%, #06c 75%); background: radial-
gradient(white 50%, #06c 75%); } </style> </head> <body> <p
id="gradient1"><code>background: radial-gradient(yellow,
green);</code></p> <p id="gradient2"><code>background: radial-
gradient(circle, yellow, green);</code></p> <p
id="gradient3"><code>background: radial-gradient(circle closest-
side, yellow, green);</code></p> <p
id="gradient4"><code>background: radial-gradient(at top left,
yellow, green);</code></p> <p id="gradient5"><code>background:
repeating-radial-gradient(#8d0, #0d0 10px, #9f0 10px, #0f0
20px);</code></p> <!-- Link back to HTML Dog: --> <p
id="gradientCollie"><a href="[Link]
src="[Link] alt="HTML Dog"></a></p>
</body> </html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Linear gradients</title>
<style>
html {
background: -webkit-linear-gradient(left, yellow, red);
background: linear-gradient(to left, yellow, red);
height: 100%;
body {
font: 14px/1.5 courier;
color: #000;
p{
width: 200px;
height: 200px;
padding: 20px;
margin: 20px 0 0 20px;
float: left;
border: 1px solid yellow;
#gradient1 {
background: #888 url(images/[Link]) repeat-x; /* Background
images can be used for browsers that aren't capable of producing gradients */
background: -webkit-linear-gradient(yellow, red); /* Backup for major browsers
that can still handle gradients */
background: linear-gradient(yellow, red); /* The CSS3 standard */
#gradient2 {
background: -webkit-linear-gradient(right, yellow, red);
background: linear-gradient(to right, yellow, red);
#gradient3 {
background: -webkit-linear-gradient(bottom right, yellow, red);
background: linear-gradient(to bottom right, yellow, red);
#gradient4 {
background: -webkit-linear-gradient(20deg, yellow, red);
background: linear-gradient(20deg, yellow, red);
#gradient5 {
background: -webkit-linear-gradient(hsl(0,100%,50%), hsl(60,100%,50%),
hsl(120,100%,50%), hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%));
background: linear-gradient(hsl(0,100%,50%), hsl(60,100%,50%),
hsl(120,100%,50%), hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%));
}
#gradient6 {
background: -webkit-linear-gradient(135deg, hsl(36,100%,50%) 10%,
hsl(72,100%,50%) 60%, white 90%);
background: linear-gradient(135deg, hsl(36,100%,50%) 10%, hsl(72,100%,50%)
60%, white 90%);
#gradientCollie {
width: 120px;
height: 90px;
padding: 75px 60px;
background: -webkit-linear-gradient(white, #06c);
background: linear-gradient(white, #06c);
</style>
</head>
<body>
<p id="gradient1"><code>background: linear-gradient(yellow, red);</code></p>
<p id="gradient2"><code>background: linear-gradient(to right, yellow, red);</code></p>
<p id="gradient3"><code>background: linear-gradient(to bottom right, yellow,
red);</code></p>
<p id="gradient4"><code>background: linear-gradient(20deg, yellow, red);</code></p>
<p id="gradient5"><code>background: linear-gradient(hsl(0,100%,50%), hsl(60,100%,50%),
hsl(120,100%,50%), hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%));</code></p>
<p id="gradient6"><code>background: linear-gradient(135deg, hsl(36,100%,50%) 10%,
hsl(72,100%,50%) 60%, white 90%);</code></p>
<!-- Link back to HTML Dog: -->
<p id="gradientCollie"><a href="[Link]
src="[Link] alt="HTML Dog"></a></p>
</body>
</html>
