Webflow sync, pageviews & more.
NEW

How can I switch the color mix blend mode in Webflow to achieve a similar effect, as mix blend mode color is not supported in Safari?

TL;DR
  • Use supported blend modes like multiply or overlay in Webflow for compatibility in Safari.
  • Create transparent overlay divs, export blended images from design tools, or apply CSS filters as alternative methods to simulate the color blend effect.

Safari lacks support for the mix-blend-mode: color, which limits blending design techniques. Here's how to get a similar visual effect in Webflow that works across all major browsers.

1. Understand the Limitations

  • mix-blend-mode: color blends an element’s hue and saturation with the background's luminosity.
  • Safari does not support this particular blend mode, which affects consistent cross-browser visuals.

2. Use Alternative Blend Modes

  • Try using other supported blend modes, like multiply, overlay, or screen, which are supported in Safari.
  • To apply this in Webflow:
  • Select the element in the Designer.
  • Go to the Style panel → Effects → set Mix Blend Mode to a supported alternative like Overlay or Multiply.

3. Use an Overlay Element with Transparent Color

  • Create a div block that sits above the background and apply a semi-transparent color (using rgba or HSLA).
  • Set the overlay's blend mode to something like multiply to simulate color influence.
  • Adjust opacity and layer stacking (Z-index) for the right effect.

4. Convert the Blending Effect to an Image

  • If you're targeting static visuals (not interactive elements), consider exporting the effect from a design tool (like Figma or Photoshop) as an image with the blending baked in.
  • Then upload this image to Webflow and use it as a background or element.

5. Use CSS Filters as a Fallback

  • While not identical to blend modes, CSS filters like hue-rotate, saturate, or brightness may help simulate certain color manipulations.
  • Add filters using Webflow by:
  • Selecting the element.
  • Going to the Style panel → Effects → Add Filter.
  • Though you can add custom CSS, it won’t help if Safari doesn’t support the feature at all. A polyfill does not exist for this specific blend mode across images or divs.

Summary

To mimic mix-blend-mode: color in Webflow on Safari:

  • Use supported blend modes like multiply or overlay instead.
  • Consider a transparent overlay div with adjusted blend and opacity.
  • For static elements, export a blended image from a design tool.
  • Use CSS filters as creative alternatives when suitable.
Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Why does the parent div of my image gallery appear too wide on Safari compared to Chrome in Webflow?
How can I play an embedded Vimeo video when it becomes visible in the viewport using a plugin in Webflow?
How can I add an image or multiple images field in Webflow or with 3rd party support for a marketplace platform where sellers can upload profile pictures and images of previous work?
What are some alternative options to Adobe Muse for users who are searching for a code-free web design solution after Adobe's announcement?
How can I create an iOS7-like blur effect in Webflow without using opacity?
How can I resolve the generic error I'm encountering when trying to paste my Figma designs into Webflow using the official Figma plugin?
How do I adjust the zoomed-in Facebook icon when sharing my Webflow site?
How can you automate SEO and Open Graph settings for Collections in Webflow CMS to save time managing them for every page of your content-heavy website or blog?
Has anyone used Passage by 1Password with the Webflow built-in user CMS?
What does "Domains have different publish dates. Republish all domains to enable single-item publish" mean in Webflow?
How can I stop a video from playing when a modal is closed in Webflow? I've tried using an HTML embed but it didn't work.
Can Webflow allow the use of a URL as an image? I imported an image URL as text via a CSV but couldn't figure out how to display it as an image. Is there a solution for this?
How can I create advanced filtering functions in Webflow to filter content by multiple options such as type, size, color, etc?
Can I add a footer to all previously published pages in Webflow if I decide I need one?
Is there a way to add anchor links to specific paragraphs in a blog post on Webflow without using ID's and creating sections?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I dynamically redirect to a CMS created after form submission in Webflow?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
How can I close a dropdown in Webflow when clicking on a link?
Is there a more optimal way to create a portfolio section with a sticky image container that changes as you scroll, similar to the design on Deveb's website, that works across different web browsers, especially Safari, using Webflow or any other JavaScript tools?
How can I implement a multi-select field with a pre-selected option in a popup form on a collection page using Webflow?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?