How to create a smooth slanted linear-gradient with CSS

Smooth Slanted Linear-gradient

Sometimes we don’t want that blur transition between the two colors in a linear-gradient. Instead we want a hard line (color stop) between the colors. We can achieve this by using the same color stop value as either a percentage or length.

background: linear-gradient(to right, #A66CFF 50%, #9C9EFE 50%);
background: linear-gradient(to right, #A66CFF 400px, #9C9EFE 400px);

Straight Color Stop

Let’s add a slant to this linear gradient. You will need to add an angle degree value as the first argument in the CSS linear-gradient function.

background: linear-gradient(96deg, #A66CFF 50%, #9C9EFE 50%);

Success, you now have an angled linear gradient, but wait do you see how the slanted line looks jagged! Your eyes aren’t playing a trick on you. We need to create a slight blur to transition these colors smoothly.

Jagged Slanted Linear-gradient

To ensure a sharp line transition, I found this helpful article. This article mentioned making the values…