"Blur gradients" appear with lines (Chrome)

Without making any changes, about 2-3 weeks ago (roughly late October 2023) a few of the sites I created started showing banding on background gradients that use the “Blur” filter on a div with rounded corners and a background colour set. Some key points:

  • Removing these items fixes the bands
  • The bands show up on the published site and in the designer
  • The bands show up on mac and windows
  • The issue does not appear in Firefox

Preview of staging site: https://voteinformed.webflow.io/

Screenshots of the bands on 2 different sites:


Here is my site Read-Only: Webflow - Vote Informed!

Hey Matthew,

Use, transform: translateZ( 0); on all elements where you ar using the blur filter

Brilliant! This worked, but only when I set the z value to greater than 1. Not sure why this differs from your solution, but, either way, thank you!