Streaming live at 10am (PST)

How different browsers process Gradients


Not a bug... just wanted to show the differences in how different browsers process gradients.

Font Weight Gets Lighter on Safari

What? Screen pixels being screen pixels and RGB values being RGB values, there is no reason for a gradient to look that off from a browser to another. Your issue is local most likely.

Look ffox os x / chrome os x / safari os x


what I see is what I'm showing you
- same monitor. same website.

I move to a difference computer (tablets - iPad, a Window tablet, or a Droid Tablet)
- exactly the same result as I originally showed you.

The only difference between what I'm doing and what's here:
- is I'm using 2 gradients... layer - one on top of another.

And notice... that's it Chrome that looks different. This is what surprised me.


Yeah that seems odd. The only differences I have seen in gradients is between new and old versions of browsers, like older versions of Firefox not supporting gradients. I have yet to see gradients react the way you've shown. I will have to keep a eye out for this.


Ok, it's about blending... give me more details to reproduce your 2 layers graient, I want to test on my side.




2 Linear Gradients

1 (Bottom)

Start / End

2 (Top)

Start / End

Have you noticed... you can EDIT / PREVIEW in Safari now ? Without the Ahh Shucks message ???

These are screen shots - directly from Edit Mode - Safari and Chrome.

Safari Edit Screen

Chrome Edit Screen


I have noticed the same thing on almost every site I have built as well. So basically I need to just change colors to work well on all browsers? Or is this a bug? Seems strange that they are completely darker when viewing on safari, firefox or ie. -notice the change in color within the header.


We are both talking apples here.

Same issue.

It's not a bug with Webflow... it's the different ways the different browsers process the request.

In your case... even the fonts are rendered a little differently.