Stack Overflow
Stack Overflow

Questions tagged [mix-blend-mode]

The mix-blend-mode is a CSS property that sets how an element's content should blend with the content of the element's parent and the element's background.

The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.

https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

https://drafts.fxtf.org/compositing-1/#mix-blend-mode

193 questions
0
votes
0 answers

how to style an SVG image to change a color with a delay

got a svg that swiches between coloroverlays, the style looks like this .wsf-tshirt{fill:#fff;mix-blend-mode: multiply;} and the java string that's included looks like this: $('.wsf-tshirt').css({fill: '#field(391)', 'mix-blend-mode':…
Bo Sandelin
  • 1
0
votes
2 answers

How do use mix-blend-mode with the color of my choice to overlay text on a video?

I need my text to be transparent towards the video behind it but not the background of the text.
0
votes
1 answer

Mix-blend-mode not affecting any component

I tried searching the web for various answers and tried everything that solved other people problem, but my CSS just doesn't want to cooperate. Here you can find a JSFiddle where I recreated the issue: I would like the side navigation to be visible…
TheRedMan
  • 7
  • 4
0
votes
1 answer

Will ImageMagick SVG to PNG conversion respect blend modes?

Does ImageMagick have the capability to handle SVG blend modes? When converting an SVG to PNG, for example? Using ImageMagick-7.0.8-Q16, Inkscape 0.92.1 r15371 I have a simple SVG with two rectangles, red and blue, and a mix-blend-mode of…
user1691949
  • 43
  • 4
0
votes
1 answer

CSS Colored Background Blend over Text

I've tried for several days to blend a colored background over a text with the same color and end up with the blended text to get white. Here is an example of what i managed to archive with only black and white: But as soon as i change the color of…
Nano
  • 1,398
  • 6
  • 20
  • 32
0
votes
2 answers

CSS position: fixed + mix-blend-mode: difference issue

I am trying to create a sticky nav bar which reacts during scrolling with the background. I experimented with mix-blend-mode: difference and it is exactly was I was looking for. But since I am using position: sticky or position: fixed this is what…
M-WRI
  • 170
  • 1
  • 2
  • 9
0
votes
1 answer

Elements set with mix-blend-mode break other element with mix-blend-mode property (Chrome)

My h1 element loses its mix-blend-mode property, defaulting back to the color of white, when another element lower in the DOM has its own mix-blend-mode property added. I'm having a really tough time pin pointing the source of this issue as…
bitclip
  • 187
  • 7
0
votes
0 answers

CSS - mix-blend-mode: difference confusion

I've been looking into mix-blend-mode in CSS which seems like a powerful property! However, I'm very confused as to how this actually works. I'm having unpredictable results. Take this codepen as an…
Kenny Bones
  • 5,017
  • 36
  • 111
  • 174
0
votes
1 answer

I can't figure out how to get mix-blend-mode to work with shadows

This is what the screen blend mode should do: this is what my css does: https://codepen.io/Thisisntme/pen/LYGypRz * { mix-blend-mode: screen; } body { background: black; mix-blend-mode: screen; } h1 { font-family: "Work Sans",…
10 Replies
  • 426
  • 9
  • 25
0
votes
0 answers

mix-blend-mode: difference looks different in Chrome than in Firefox

So I have a custom cursor that uses mix-blend-mode: exclusion in my website. The cursor's original colour (without considering mix-blend-mode) is cyan and most elements below it are either white, black, blue or magenta, so the colours you can see…
Danziger
  • 19,628
  • 4
  • 53
  • 83
0
votes
0 answers

Z-index and mix-blend-mode are not working together on hover in Firefox

EDIT: I think this is some kind of bug in Firefox (74.0) on Mac (Catalina). I have tested it on both my Mac and Macbook and they are behaving incorrectly, but it works fine on my PC Firefox. I am currently developing a site that uses overlay…
Justin Kendall
  • 53
  • 7
0
votes
1 answer

CSS overlay and screen blend modes look different on phone and laptop

I am trying to use blend modes for a website for a project, but I've found that they look different on my phone browser (chrome v 78.0.3904.84 on iphone 7) to my browser on my laptop (chrome v 78.0.3904.97 on mac). It looks like this on the laptop,…
user11059025
  • 5
  • 2
0
votes
2 answers

How can i blend a container with two different containers in css

I have a container and I want to apply the mix-blend-mode: difference to it to blend with its parental container and the parental container of the parental container (and so on). When I apply the blend-mode the container only blends with its…
Cypher
  • 13
  • 3
0
votes
1 answer

Is it possible to use a static background behind an animated canvas with mix-blend-mode?

I'm trying to create an animation where each element would change its colour based on the parent div's background. I'm using pts.js to make the animation. It draws everything on a canvas. Here's my setup: fiddle. After adding mix-blend-mode:…
Tomasz Kasperczyk
  • 1,991
  • 3
  • 22
  • 43
1 2 3
…
12 13