Transparent to color gradient CSS issue

Question

I've created a gradient which goes from transparent to white using this CSS:

linear-gradient(to right, transparent, white)

Also see: http://jsfiddle.net/fs8gpha2/

This is all working fine in Chrome, but in both Safari and Firefox the center of the gradient is grey. Is there any way to work around this?

Thanks!

venimus · Accepted Answer · 2015-02-24 11:02:27Z

2

Try like this:

body {
    background: #000;
}

div {
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255));
    width: 100%;
    height: 100px;
}

Here is the Demo

edited Feb 24, 2015 at 11:02

venimus

6,1372 gold badges32 silver badges41 bronze badges

answered Feb 24, 2015 at 10:22

G.L.P

7,2075 gold badges27 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Leon Over a year ago

I apparently had to wait for 5 minutes before I was allowed to accept an answer. Done now :)

Aranel · Accepted Answer · 2015-02-24 10:30:12Z

This is would be a cross-browser solution (I updated the jsfiddle):

http://jsfiddle.net/fs8gpha2/4/

div { 
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 1)));
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
background: -moz-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
background: -o-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
background: -ms-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
background: linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
background-color: rgba(255, 255, 255, 0); width:100%; height:100px; }

Cheers

Collectives™ on Stack Overflow

Transparent to color gradient CSS issue

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related