Colors showing different on safari

Design help Experimental browsers
1

Hi, everyone

I was wondering why the gradient colors are showing every different on chrome compared to viewing it on safari browser.

Here is a testing website to view, any help is greatly appreciated.

https://preview.webflow.com/preview/testing-72e275?utm_medium=preview_link&utm_source=designer&utm_content=testing-72e275&preview=7f804a14e236b74be0e5423f1c70f7f9&workflow=preview

2

Hi there,

Safari interprets gradients to transparency differently than other browsers. Specifically, Safari interprets gradients to transparency as “transparent black,” which means the transparent color will appear black for Safari users. To work around this, you can:

  • Use rgba() or hsla() color values instead of the ‘transparent’ keyword
  • Set the alpha channel to 0 for full transparency (e.g., rgba(255,255,255,0))
  • Test your gradients in Safari during development to ensure consistent appearance across browsers

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

The difference in gradient colors between Chrome and Safari is likely due to how each browser renders CSS gradients, especially with certain blending modes or transparency settings. To ensure consistency, use background: linear-gradient() with explicit color values in RGBA format instead of relying on opacity settings. Also, check if -webkit-background-clip: text or mix-blend-mode is affecting how Safari interprets the gradient. If you’re using Webflow’s gradient tool, try manually setting the gradient stops with precise color values. Additionally, adding background-blend-mode: normal; can sometimes help unify the appearance across browsers.