CODEWITHSUNDEEP
htmlcsstransparencylinear-gradients
sp00m
sp00m

Reputation: 48817

How to set a (nice) linear-gradient from any color to transparent?

I'm trying to set a linear-gradient on a div from red to transparent, but the output is a bit strange: fiddle.

Fiddle's css:

background: -webkit-linear-gradient(transparent, red);
background:    -moz-linear-gradient(transparent, red);
background:     -ms-linear-gradient(transparent, red);
background:      -o-linear-gradient(transparent, red);
background:         linear-gradient(transparent, red);

As you can see, the transition between the two colors is in gray, while I expected only a red gradation.

Does anybody know how to improve this output (without replacing "transparent" by "yellow" in the fiddle)?

PS: tried in Chrome 23.0.1271.64

Upvotes: 2

Views: 431

Answers (2)

Dan
Dan

Reputation: 294

I have just modified your jsfiddle

Check if like you want

background: -webkit-linear-gradient(rgba(255,0,0,1) 0%,rgba(255,255,255,0) 100%);
background:    -moz-linear-gradient(rgba(255,0,0,1) 0%,rgba(255,255,255,0) 100%);
background:     -ms-linear-gradient(rgba(255,0,0,1) 0%,rgba(255,255,255,0) 100%);
background:      -o-linear-gradient(rgba(255,0,0,1) 0%,rgba(255,255,255,0) 100%);
background:         linear-gradient(rgba(255,0,0,1) 0%,rgba(255,255,255,0) 100%);

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

try changing transparent into rgba(255,0,0, 0)

example fiddle: http://jsfiddle.net/9MpNM/

Upvotes: 7

Related Questions