CSS3 White to Transparent Gradient
Solution 1
Change your final step to #FFFFFF00
(rgba(255, 255, 255, 0)
) instead of #00000000
:
Solution 2
The final color should be white, transparent, and not black transparent
instead of
rgba(0, 0, 0, 0)
end in
rgba (255, 255, 255, 0)
Solution 3
If anyone else if having trouble with gradients or getting a certain aspect (angles, transparency, etc.) I recommend trying this tool to learn more: http://www.colorzilla.com/gradient-editor/ The code below is a sample of what it can do. Transparency is controlled by the top squares, color on the lowers. It allows you to keep dropping more colors in. It has good backwards comparability as well and also some has presets.
`div {
background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,58,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,58,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,58,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffff3a',GradientType=1 ); /* IE6-9 */
background-repeat: repeat-x;
padding: 2rem 0;
}`
Comments
-
AlecRust almost 2 years
I'm using CSS3 and RGBA to create a white-to-transparent gradient:
div { background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0)); background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0)); background-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(255, 255, 255, 1)), to(rgba(0, 0, 0, 0))); background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0)); background-image: linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0)); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255, 255, 255, 1)', endColorstr='rgba(0, 0, 0, 0)', GradientType=1); padding: 2rem 0; }
Fiddle here: http://jsfiddle.net/alecrust/fYz45/
However as you'll notice, the gradient is dark in the middle. I'm getting this:
And I'm expecting this:
How can I rectify?