How to create a smooth slanted linear-gradient with CSS
--
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);
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.
To ensure a sharp line transition, I found this helpful article. This article mentioned making the values slightly different from one another instead of using the same value. Change the second value by using the calc function to add 1px. This will add a slight smoothing blur to your gradient and removes the jagged line.
background: linear-gradient(96deg, #A66CFF 50%, #9C9EFE calc(50% + 1px));
Let’s make this slanted gradient responsive. As an example, we have content like the image below. On tablet and smaller we would like to have the content stacked vertically on top of each other.
If we kept the linear-gradient as is the stacked content wouldn’t look very good with the gradient.
