webkit-gradient-linear-1-ref.html (1512B)
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>CSS Reference</title> 9 <style> 10 div { 11 border: 1px solid black; 12 width: 100px; 13 height: 50px; 14 margin: 1px; 15 float: left; 16 } 17 br { clear: both; } 18 </style> 19 </head> 20 <body> 21 <!-- Left to right gradients: --> 22 <div style="background: linear-gradient(to right, 23 blue, yellow)"></div> 24 25 <div style="background: linear-gradient(to right, 26 blue, pink 30%, yellow"></div> 27 <br> 28 29 <!-- Right to left gradients: --> 30 <div style="background: linear-gradient(to left, 31 blue, yellow)"></div> 32 <div style="background: linear-gradient(to left, 33 blue, pink 30%, yellow"></div> 34 <br> 35 36 <!-- Top to bottom gradients: --> 37 <div style="background: linear-gradient(to bottom, 38 blue, yellow)"></div> 39 40 <div style="background: linear-gradient(to bottom, 41 blue, pink 30%, yellow"></div> 42 <br> 43 44 <!-- Bottom to top gradients: --> 45 <div style="background: linear-gradient(to top, 46 blue, yellow)"></div> 47 48 <div style="background: linear-gradient(to top, 49 blue, pink 30%, yellow"></div> 50 </body> 51 </html>