gradient-increasing-hue-hsl-ref.html (2171B)
1 <!doctype html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>Gradient in HSL space</title> 7 <link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> 8 <style> 9 body { 10 background: #fff; 11 } 12 13 div { 14 width: 200px; 15 height: 100px; 16 margin: 10px; 17 } 18 19 div.a { 20 background-image: linear-gradient(to right in hsl increasing hue, 21 hsl(0deg, 100%, 50%), 22 hsl(10deg, 100%, 50%), 23 hsl(20deg, 100%, 50%), 24 hsl(30deg, 100%, 50%), 25 hsl(40deg, 100%, 50%)); 26 } 27 28 div.b { 29 background-image: linear-gradient(to right in hsl increasing hue, 30 hsl(40deg, 100%, 50%), 31 hsl(120deg, 100%, 50%), 32 hsl(200deg, 100%, 50%), 33 hsl(280deg, 100%, 50%), 34 hsl(360deg, 100%, 50%)); 35 } 36 37 div.c { 38 background-image: linear-gradient(to right in hsl increasing hue, 39 hsl(0deg, 100%, 50%), 40 hsl(90deg, 100%, 50%), 41 hsl(180deg, 100%, 50%), 42 hsl(270deg, 100%, 50%)); 43 } 44 45 div.d { 46 background-image: linear-gradient(to right in hsl increasing hue, 47 hsl(270deg, 100%, 50%), 48 hsl(300deg, 100%, 50%), 49 hsl(330deg, 100%, 50%), 50 hsl(360deg, 100%, 50%)); 51 } 52 </style> 53 </head> 54 55 <body> 56 <div class=a></div> 57 <div class=b></div> 58 <div class=c></div> 59 <div class=d></div> 60 </body> 61 </html>