Image for post
Image for post

Avoiding jagged edges on gradients.

Mandy Michael
Nov 8, 2019 · 2 min read

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.

Image for post
Image for post
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.

Image for post
Image for post
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%);
Image for post
Image for post
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

Pixel and Ink

Seven West Media (WA) Digital Team blog.

Mandy Michael

Written by

Lover of CSS, and Batman. Front End Developer, Writer, Speaker, Development Manager | Founder & Organiser @fendersperth | Organiser @mixinconf

Pixel and Ink

Seven West Media (WA) Digital Team blog.

Mandy Michael

Written by

Lover of CSS, and Batman. Front End Developer, Writer, Speaker, Development Manager | Founder & Organiser @fendersperth | Organiser @mixinconf

Pixel and Ink

Seven West Media (WA) Digital Team blog.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store