gradient-to-transparent.html (1109B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 4 <title>CSS Gradient test: gradients to/from transparent</title> 5 <link rel="help" href="https://drafts.csswg.org/css-color-4/#interpolation"> 6 <meta name="assert" content="Gradient to/from transparent ignores the color components of the transparent stop"> 7 <link rel="match" href="gradient-to-transparent-ref.html"> 8 9 <style> 10 .test { 11 display: inline-block; 12 width: 25px; 13 height: 100px; 14 margin: 10px; 15 } 16 .a { 17 background: linear-gradient(transparent, 75%, red); 18 } 19 .b { 20 background: linear-gradient(rgba(255 0 0 / 0), 75%, red); 21 } 22 .c { 23 background: linear-gradient(rgba(0 0 255 / 0), 75%, red); 24 } 25 .d { 26 background: linear-gradient(blue, 75%, transparent); 27 } 28 .e { 29 background: linear-gradient(blue, 75%, rgba(0 0 255 / 0)); 30 } 31 .f { 32 background: linear-gradient(blue, 75%, rgba(0 255 0 / 0)); 33 } 34 </style> 35 36 <p>All three gradients should look the same:</p> 37 <div class="test a"></div> 38 <div class="test b"></div> 39 <div class="test c"></div> 40 41 <p>All three gradients should look the same:</p> 42 <div class="test d"></div> 43 <div class="test e"></div> 44 <div class="test f"></div>