gradients-with-transparent.html (872B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Gradients with transparent</title> 4 <link rel="help" href="https://www.w3.org/TR/css3-images/#linear-gradients"> 5 <link rel="match" href="gradients-with-transparent-ref.html"> 6 <meta name="assert" content="The blue gradients to 'transparent' keyword, and rgba(0,0,0,0), match the gradient to rgba(0,0,255,0)"> 7 <style> 8 .test { 9 width: 200px; 10 height: 100px; 11 margin-left: 90px; 12 } 13 #gradient1 { 14 background-image: linear-gradient(to left, blue 0%, blue 20%, transparent); 15 } 16 #gradient2 { 17 background-image: linear-gradient(to left, blue 0%, blue 20%, rgba(0,0,0,0)); 18 } 19 </style> 20 <body> 21 <p>Gradient using 'transparent'</p> 22 <div id="gradient1" class="test"></div> 23 <br /> 24 <p>Gradient using rgba(0,0,255,0)</p> 25 <div id="gradient2" class="test"></div> 26 </body>