scaled-color-stop-position-ref.html (596B)
1 <!-- 2 Any copyright is dedicated to the Public Domain. 3 http://creativecommons.org/publicdomain/zero/1.0/ 4 --> 5 <!DOCTYPE html> 6 <html> 7 <head> 8 <title>Color stop positioning for scaled gradients as backgrounds reference</title> 9 <style type="text/css"> 10 #outer 11 { 12 border: 1px solid black; 13 width: 600px; height: 300px; 14 } 15 #inner 16 { 17 width: 400px; height: 300px; 18 /* 250px stop is halfway along 500px diagonal */ 19 background-image: linear-gradient(to bottom right, lime 0%, teal 250px, black 100%); 20 } 21 </style> 22 </head> 23 <body> 24 <div id="outer"><div id="inner"></div></div> 25 </body> 26 </html>