CSS3 Linear Gradient

Question

Consider this page: http://d.pr/i/GA5V

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?

Answer 1

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:

New: