CODEWITHSUNDEEP
htmlcsslinear-gradients
Mike R
Mike R

Reputation: 231

CSS3 -webkit-linear-gradient creating darker vertical lines than expected

I'm trying to create a grid in pure CSS using background-image and -webkit-linear-gradient. I have the spacing and the tiling working fine, but for a reason I can't figure out, the vertical lines are coming out as #B8B8B9 instead of #E3E4E5 like I specify. Any ideas?

JSFiddle: http://jsfiddle.net/2faSt/

CSS:

.grid {
    position: absolute;
    width: 100%;
    height: 500px;
    background-image: -webkit-linear-gradient(0deg, #e3e4e5 0px, transparent 1px, transparent 15px, #e3e4e5 16px, transparent 16px, transparent 99px, #e3e4e5 100px, #ffffff 100px), -webkit-linear-gradient(90deg, transparent 20px, #e3e4e5 20px);
    background-size: 111px 21px;
}

Upvotes: 1

Views: 1469

Answers (1)

vals
vals

Reputation: 64174

If you want to get really the color that you specify, you should set 2 color stops with the same color, separated by at least 1 px.

Otherwise, you set only the point of gradient change, but it is already changing to transparent, even in the same pixel

And, even it is non intuitive, transparent if black transparent (rgba (0,0,0,1))

See this fiddle

There, you have this CSS:

#one {
    background: linear-gradient(90deg, #e3e4e5, transparent);
}

#two {
    background: linear-gradient(90deg, #e3e4e5, rgba(255, 255, 255, 1));
}

In the first div (The same color stops that in your question), you can see that in the middle of the transition the color is darker than at the beginning. As a comparison, in the second you can see what probably you intended, make the transition to white transparent.

Upvotes: 2

Related Questions