scaled-color-stop-position.html (585B)
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</title> 9 <style type="text/css"> 10 #outer 11 { 12 border: 1px solid black; 13 width: 600px; height: 300px; 14 /* 250px stop is halfway along 500px diagonal */ 15 background-image: linear-gradient(to bottom right, lime 0%, teal 250px, black 100%); 16 background-size: 400px auto; 17 background-repeat: no-repeat; 18 } 19 </style> 20 </head> 21 <body> 22 <div id="outer"></div> 23 </body> 24 </html>