webkit-gradient-linear-1b.html (2490B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html> 7 <head> 8 <title> 9 CSS Test: -webkit-gradient(linear, ...) expressions, 10 from the top-left-most end of each side to the 11 top-left-most end of opposite side. 12 </title> 13 <style> 14 div { 15 border: 1px solid black; 16 width: 100px; 17 height: 50px; 18 margin: 1px; 19 float: left; 20 21 /* We include a fallback background, to easily distinguish failures at 22 * parse time (which fall back to this value) vs. something later on. */ 23 background: red; 24 } 25 br { clear: both; } 26 </style> 27 </head> 28 <body> 29 <!-- Left to right gradients: --> 30 <div style="background: -webkit-gradient(linear, left top, right top, 31 from(blue), to(yellow))"></div> 32 33 <div style="background: -webkit-gradient(linear, left top, right top, 34 from(blue), 35 color-stop(0.3, pink), 36 to(yellow))"></div> 37 <br> 38 39 <!-- Right to left gradients: --> 40 <div style="background: -webkit-gradient(linear, right top, left top, 41 from(blue), to(yellow))"></div> 42 <div style="background: -webkit-gradient(linear, right top, left top, 43 from(blue), 44 color-stop(0.3, pink), 45 to(yellow))"></div> 46 <br> 47 48 <!-- Top to bottom gradients: --> 49 <div style="background: -webkit-gradient(linear, left top, left bottom, 50 from(blue), to(yellow))"></div> 51 52 <div style="background: -webkit-gradient(linear, left top, left bottom, 53 from(blue), 54 color-stop(0.3, pink), 55 to(yellow))"></div> 56 <br> 57 58 <!-- Bottom to top gradients: --> 59 <div style="background: -webkit-gradient(linear, left bottom, left top, 60 from(blue), to(yellow))"></div> 61 62 <div style="background: -webkit-gradient(linear, left bottom, left top, 63 from(blue), 64 color-stop(0.3, pink), 65 to(yellow))"></div> 66 </body> 67 </html>