Test gradients with transparent colors

Test gradients with transparent colors - weird behavior with gradient from/to transparent in Chrome & Firefox vs. Opera.

by George Moga

HTML

<div class="solid holder">Solid gradient: white to red (25%) to red (75%) to white.</div>
<div class="grad holder">Transparent gradient: white to transparent (25%) to transparent  (75%) to white - over red background.</div>

CSS

html { background-color: red; }
.holder { height: 20em; width: 50%; text-align: center; padding: 9em 1em 1em 0em; 
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.solid { float: left;  
background-image: -webkit-linear-gradient(top, white 0%, red 25%, red 75%, white 100%); 
background-image:    -moz-linear-gradient(top, white 0%, red 25%, red 75%, white 100%); 
background-image:     -ms-linear-gradient(top, white 0%, red 25%, red 75%, white 100%); 
background-image:      -o-linear-gradient(top, white 0%, red 25%, red 75%, white 100%); 
background-image:         linear-gradient(top, white 0%, red 25%, red 75%, white 100%); }
.grad { float: right; 
background-image: -webkit-linear-gradient(top, white 0%, transparent 25%, transparent 75%, white 100%); 
background-image:    -moz-linear-gradient(top, white 0%, transparent 25%, transparent 75%, white 100%); 
background-image:     -ms-linear-gradient(top, white 0%, transparent 25%, transparent 75%, white 100%); 
background-image:      -o-linear-gradient(top, white 0%, transparent 25%, transparent 75%, white 100%); 
background-image:         linear-gradient(top, white 0%, transparent 25%, transparent 75%, white 100%); }