webkit-gradient-linear-2-ref.html (1833B)
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: 30px; 13 height: 50px; 14 margin: 1px; 15 float: left; 16 } 17 br { clear: both; } 18 </style> 19 </head> 20 <body> 21 <!-- No color stops (transparent): --> 22 <div></div> 23 24 <!-- Add another background to be sure we're transparent, not white: --> 25 <div style="background: linear-gradient(to right, pink, purple)"></div> 26 <br> 27 28 <!-- One color stop, at various positions (renders as solid color): --> 29 <div style="background: blue"></div> 30 <div style="background: blue"></div> 31 <div style="background: blue"></div> 32 <div style="background: blue"></div> 33 <br> 34 35 <!-- Two color stops, both at the same position: --> 36 <div style="background: yellow"></div> 37 <div style="background: blue"></div> 38 <div style="background: linear-gradient(to right, 39 blue 30%, yellow 30%)"></div> 40 <div style="background: yellow"></div> 41 <div style="background: blue"></div> 42 <br> 43 44 <!-- Color stops out of order & need (stable) sorting: --> 45 <div style="background: linear-gradient(to right, 46 blue, yellow)"></div> 47 <div style="background: linear-gradient(to right, 48 salmon, yellow)"></div> 49 <div style="background: linear-gradient(to right, 50 blue, yellow)"></div> 51 <div style="background: linear-gradient(to right, 52 blue, yellow)"></div> 53 <div style="background: linear-gradient(to right, 54 yellow, salmon 80%, blue)"></div> 55 </body> 56 </html>