CSS3 Linear Gradient

Question

The problem is about these gradient of the page content. In this screenshot, the gradient is as follows:

linear-gradient(to right, rgba(0,0,0,1) 0px, rgba(255,255,255,1) 30px, rgba(255,255,255,1) 970px, rgba(0,0,0,1) 1000px);

There are 2 problems:

1 - The extremes of the gradient (0px and 1000px) should not go black. They should go transparent, but by this I mean that the extremes of the white div that is wrapping the page content should be transparent and show the background of the main page (which is a sort of dark image texture). If I put rgba(0,0,0,0) in the extremes, the background will be transparent to the white div (resulting in a completely white div). It should be something like:

linear-gradient(to right, MakeCurrentElementTransparent 0px, rgba(255,255,255,1) 30px, rgba(255,255,255,1) 970px, MakeCurrentElementTransparent 1000px);

2 - The gradient doesn't seem to be very smooth. I can see vertical color bars in it. Is there a way to make these linear-gradients more smooth (I mean, make the color transition more smooth) in CSS3?

The code is way too complex (uses LESS etc), but just a sec, I'll post an equivalent jsfiddle — rafaame
– rafaame, Commented Dec 27, 2013 at 21:08
Oh sorry, I put background-color: white in the div by mistake, thats why it was not working. — rafaame
– rafaame, Commented Dec 27, 2013 at 21:24

MultiplyByZer0 · Accepted Answer · 2013-12-27 21:32:25Z

2

Solving problem #2, I got it to be smoother by doing it with percents, instead of pixels:

linear-gradient(to right, rgba(0,0,0,1) 0px, rgba(255,255,255,1) 30px, rgba(255,255,255,1) calc(100% - 30px), rgba(0,0,0,1) 100%)

Original
New

Old:

Old

New:

New

edited Dec 27, 2013 at 21:32

answered Dec 27, 2013 at 21:20

MultiplyByZer0

7,2693 gold badges35 silver badges49 bronze badges

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

2 Comments

rafaame Over a year ago

It seems to be the same smoothing in color transition for both original and new.

MultiplyByZer0 Over a year ago

@rafaame In Chrome the new one looks better. What browser are you using?

Collectives™ on Stack Overflow

CSS3 Linear Gradient

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related