How do CSS’s "mix-blend-mode" property work in Internet Explorer and Edge?

Asked

Viewed 65 times

0

I made a gradient layer that goes over some images in my project with the following CSS code:

{
     background: linear-gradient(45deg, rgba(32, 51, 108, 1), rgba(237, 17, 100, 1));
     mix-blend-mode: multiply;
}

It works perfectly on all browsers except Edge and Internet Explorer. Would you know if there is any alternative?

OBS.: My first alternative was to reduce the opacity of the element, but it does not return me the same effect that is in the design.

css css3

  • related: https://stackoverflow.com/questions/43407846/css-blend-mode-not-working

  • @But this question has nothing to do with the other... besides the link you indicated to be in English, there they do not even touch on the subject of Internet Explorer or Edge, has nothing to do with this link and only confuses other users

  • @Small are different problems, in the case of the above question the blend mode was not working because of syntax error.

  • Matheus have you ever checked Google Analytics how many % of your audience uses IE? I doubt you need to support him... but in the case of Edge his next update will use Chromium, the same as Chrome, so he will go on to accept just about everything Chrome accepts

  • Yes! he did not put the selector and will not work the styles.

  • @But you read the question statement? The code is working perfectly in all browsers with the exception of IE and Edge. It is not a syntax error on my part, but a compatibility problem for Microsoft browsers. My question is not whether it is working or not, but how to run this property in these browsers

  • @hugocsl the site is for the agency I work for, and some of the clients use IE a lot, because of that the project needs to run on it as well.

  • 1

    For a user who already has more than 6 years of Stackoverflow, I can say that this question is poorly closed. https://stackoverflow.com/users/3448527/dippas, You are fully within the scope as it asks for a solution to a CSS feature for a browser like IE

  • @dippas unfortunately this happens often, wanted to know the reason.

Show 4 more comments

1 answer

1

At the moment the mix-blend-mode not supported by IE, see here on canIuse

SS

  • Yes @dippas, I’m aware. What I would like to know is if there is any alternative to make a similar effect with css or maybe some lib on js that might solve the problem.

  • you can use ::after and try to adjust the opacity but it will never stay 100%

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.