Avoiding jagged edges on gradients.

A really common design pattern I see come up a lot are those angled blocks of colour in the bottom of containers, you’ve probably come across it, it looks something like the image below.

Angled colour block inside a square

This happened to turn up on one of our projects and rather than implementing with an image or SVG we decided to use a linear-gradient, the benefit of this is that it’s really easy to change the angle, colour etc within the CSS. The problem we had was that the angle of the gradient in the space available caused a really horrible jagged edge.

Figure 2: jagged edged angled gradient

The real life example looked like Figure 2, as you can see the jagged edge is quite prominent.

Luckily, there is a really simply way to solve this problem! Normally when you want to create a sharp line in a linear gradient you’d create your gradient like the code below.

background: 
  linear-gradient(176deg, white, white 75%, black 75%, black 100%);

This basically ensures that from 0–75% we have a white colour and then from 75% on, it’s black! This creates a really nice sharp line. Unfortunately, depending on the angle, and the size of the container you can end up with the ugly zig zag.

Fixing this requires a very small change — add a decimal to the second percentage which will create a slight blur on the gradient. This will need to be adjusted depending on your use case to ensure the blur isn’t too prominent — but visually it will result in a smoother gradient!

background:
 linear-gradient(176deg, white, white 75%, black 75.3%, black 100%);

Side by side example of the jagged vs smooth gradient.

Update:
Several people comment to me on twitter about using calc, this is also an option which can be achieve by doing something like the following:

background:
 linear-gradient(176deg, white, white 75%, black calc(75% + 1px), black 100%);

The Codepen example:

Hopefully this helps with your issues in the future!

Enjoy!

Mandy