Smooth CSS gradients

Question

I'm learning how to use CSS gradients.

My problem is with top to bottom gradients. You can just see the "stops" in the color changing.

This is my CSS code

#header { 
   width:1000px; 
   height:250px; 
   background:-moz-linear-gradient(top, #BF7A30 30%, #EDD599); 
   background:-webkit-linear-gradient(top, #BF7A30 30%, #EDD599); 
}

Is there a way to smooth out the stops in top to bottom gradients? (this, to my eye, isn't very visible in left to right or right to left gradients)

Answer 1

The main cause of this bending effect is actually the linear blending of colors, which is not as harmonious to the human eye.

Andreas Larsen has written a pretty elaborate article on css-tricks.com (2017). https://css-tricks.com/easing-linear-gradients/

It describes a concept of non-linear gradients by defining multiple color stops approximating a clothoid curve.

Would result in something like this (.gradient-clothoid):

.gradient-wrp {
  display: flex;
}

.header {
  width: 100%;
  height: 250px;
  flex: 0 0 none;
}

.gradient-linear {
  background-image: linear-gradient(#bf7a30 30%, #edd599);
}

.gradient-smooth {
  background-image: linear-gradient(#bf7a30 25%, 75%, #edd599);
}

.gradient-clothoid {
  background-image: linear-gradient(
    rgba(191, 122, 48, 1) 0%,
    rgba(191, 122, 48, 0.3) 50%,
    rgba(191, 122, 48, 0.15) 65%,
    rgba(191, 122, 48, 0.075) 75.5%,
    rgba(191, 122, 48, 0.037) 82.85%,
    rgba(191, 122, 48, 0.019) 88%,
    rgba(191, 122, 48, 0) 100%
  );
}

<div class="gradient-wrp">
  <div class="header gradient-linear"></div>
  <div class="header gradient-smooth"></div>
  <div class="header gradient-clothoid"></div>
</div>

This concept is also known as "scrim".

IMHO not so well suited for "starting" color stops like the original example:

• the top 30% of gradient should have 100% color intensity. Probably to ensure better text readability for a heading
• the remaining 70% should have a smooth color transition.

I actually prefer Amelia Bellamy-Royds’ proposal (article down below in the comments) using a (well supported) gradient smoothing by adding stop without color definition like so:

.gradient-smooth{
   background-image:linear-gradient(#BF7A30 25%, 75%, #EDD599); 
}

This will smooth the gradient between 25% and 75% to the bottom spline based and not linear.

.gradient-linear{
   background-image:linear-gradient(#BF7A30 30%, #EDD599); 
 }