webkit-gradient-linear-1a.html (2497B)
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 center of each side to center of opposite side. 11 </title> 12 <style> 13 div { 14 border: 1px solid black; 15 width: 100px; 16 height: 50px; 17 margin: 1px; 18 float: left; 19 20 /* We include a fallback background, to easily distinguish failures at 21 * parse time (which fall back to this value) vs. something later on. */ 22 background: red; 23 } 24 br { clear: both; } 25 </style> 26 </head> 27 <body> 28 <!-- Left to right gradients: --> 29 <div style="background: -webkit-gradient(linear, left center, right center, 30 from(blue), to(yellow))"></div> 31 32 33 <div style="background: -webkit-gradient(linear, left center, right center, 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 center, left center, 41 from(blue), to(yellow))"></div> 42 <div style="background: -webkit-gradient(linear, right center, left center, 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, center top, center bottom, 50 from(blue), to(yellow))"></div> 51 52 <div style="background: -webkit-gradient(linear, center top, center 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, center bottom, center top, 60 from(blue), to(yellow))"></div> 61 62 <div style="background: -webkit-gradient(linear, center bottom, center top, 63 from(blue), 64 color-stop(0.3, pink), 65 to(yellow))"></div> 66 </body> 67 </html>