How to make CSS gradient look smooth?

Question

I have a black background and want to add a block inside with simple CSS gradient from transparent to 0.7 white:

linear-gradient(to right, 
    hsla(0, 0%, 100%, 0), 
    hsla(0, 0%, 100%, 0.76) 14%, 
    hsla(0, 0%, 100%, 0.76)
)

But this looks bad:

The only way I found is to add additional color stops, manually.

background: linear-gradient(
    to right,
    hsla(0, 0%, 100%, 0),
    hsla(0, 0%, 100%, 0.05) 2%,
    hsla(0, 0%, 100%, 0.09) 3%,
    hsla(0, 0%, 100%, 0.2) 5%,
    hsla(0, 0%, 100%, 0.57) 11.5%,
    hsla(0, 0%, 100%, 0.69) 14%,
    hsla(0, 0%, 100%, 0.75) 16.5%,
    hsla(0, 0%, 100%, 0.76) 17.5%,
    hsla(0, 0%, 100%, 0.77)
);

And it looks much better:

The comparsion demonstration on CodePen

Is there an easier way to make CSS gradient smooth on color stops?

Answer 1

One day, I hope, we've got this:

linear-gradient(
  to top,
  hsla(330, 100%, 45%, 0),
  cubic-bezier(0.45, 0, 0.5, 0.5),
  hsla(330, 100%, 45%, 1)
);

Bot for now, we have this:

• PostCSS plugin with 2 options: https://github.com/larsenwork/postcss-easing-gradients
• An app allowng you to choose an easing function: https://larsenwork.com/easing-gradients/