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
3
votes
0 answers

mix-blend-mode with backdrop-filter: blur triggers glitches on Chrome

On Windows, with Chrome, I try to use backdrop-filter: blur and mix-blend-mode: soft-light, but every time my cursor moves on the Chrome Tabs, rectangle glitches occur at the top of the page. I don't know how to fix it... body { margin: 0; …
Phoax
  • 169
  • 1
  • 2
  • 9
3
votes
2 answers

Mix-blend-mode: multiply not working in Chrome

I am trying to use mix-blend-mode: multiply on Chrome but it doesn't work as expected: when I add magenta, cyan and yellow together it doesn't give me black but brown. In Safari, everything is working fine. I tried the trick to add the following…
Léalbatroz
  • 101
  • 1
  • 3
3
votes
3 answers

CSS mix blend mode / only white or black

Hello I'm currently trying to find a solution to make a sticky text black if the background is white or black in any other case. During my research I found mix blend mode property but it seems very complex to make what I want. .sticky { …
talanon
  • 31
  • 1
  • 5
3
votes
1 answer

What colorspace is mix-blend-mode saturation from?

The spec for blend-mode saturation says: Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color. Originally I assumed it would be HSL as that's the only colorspace you can use in web development…
user3282374
3
votes
1 answer

Mix-blend-mode doesn't work if I use "transform" on the parent div

I want the text on the button to be 'transparent', so you can see the color below. It's been almost 2 hours and I was going CRAZY trying to understand why it doesn't work, but I noticed that if I remove transform: translate(-50%, -50%); from its…
Mailer
  • 127
  • 1
  • 7
3
votes
2 answers

Using `backdrop-filter: blur` with `mix-blend-mode`, the color of text doesn’t show correctly

I’m using backdrop-filter: blur on the article element to blur the background picture, and mix-blend-mode: overlay on the h1 element for some colors. I was expecting something like this below (a mockup created with Sketch), but the actual title…
Eana Hufwe
  • 896
  • 1
  • 10
  • 17
3
votes
1 answer

Using mix-blend-mode to knock out a shape from it's parent, while keeping sibling text normal

I have read tons of posts about folks trying to make this kind of shape and the best solution I have is to use mix-blend-mode:screen;. These posts were 5+ years old so I am hoping there is a new kind of solution. However, I also need the text to not…
Iisrael
  • 397
  • 4
  • 17
3
votes
1 answer

Using mix-blend-mode on nested components with a different z-index

I have a setup that uses nested, absolute-positioned divs, and I need mix-blend-mode to blend the elements of a div with all of elements that have a lower z-index than that div. The catch is that each div must have its own independent z-index (this…
gabranches
  • 71
  • 6
3
votes
1 answer

mix-blend-mode not working in webkit-browsers when element is direct child of body

I can't get an svg image with fill="#fff" to show on a white background using mix-blend-mode: difference in webkit browsers like chrome or edge. It is working fine in firefox. Check out this Fiddle for reference: JSFiddle CSS body { …
Florian_W7
  • 33
  • 1
  • 6
3
votes
1 answer

Mix blend mode with 2 overlapping divs but need to exclude the text

I'm flexing 2 elements, they overlap about 25%. Using mix-blend-mode, it blends the backgrounds nicely, but also the text. JS fiddle right here: https://jsfiddle.net/simohell/q9breg60/ I tried using ::before to apply the mix-blend mode but i can't…
simohell
  • 31
  • 1
3
votes
1 answer

Isolation with CSS Mix-Blend-Modes: how to prevent elements from blending with parent

I have tried this a lot of different ways, and cannot make it so that the .pink and .green divs blend with one another, but not the background color of the parent element, .wrapper. .wrapper { background-color: blue; height: 100vh; width:…
Gretie
  • 31
  • 1
  • 2
3
votes
1 answer

How to invert stroke text color depending on background

I have 2 divs 50% width each. There is a huge header h1 which should have the color of these two divs. I have tried mix-blend-mode but it gives me some random colors when set to difference. My goal is to invert the colors but to keep the colors of…
Luka
  • 171
  • 1
  • 1
  • 19
3
votes
2 answers

Invert colored text related background

I want to invert text color based on the background of the text, like in this image: . So I've tried the following code, but it didn't work: #warp, #text, #tri { position: absolute; top: 0; left: 0; width: 150px; height: 150px; …
Wany
  • 35
  • 2
  • 7
3
votes
1 answer

Animate Blend Mode with opacity and transition

I'm looking for a way to change the opacity of background-color-blend-mode like Photoshop. My goal is to animate the opacity of the blend-mode to make it disappear. Any ideas ? #img-esadvalence { background-image:…
Léo Durand
  • 215
  • 1
  • 4
  • 13
3
votes
1 answer

CSS mix-blend-mode affecting other elements on Mac Chrome

This is a bit of a difficult question to create a fiddle for since the problem could be any number of things on a complex WordPress page. Creating a fiddle for what I think may be the problem has not replicated the issue. For now, an extract of the…
simbasounds
  • 327
  • 5
  • 13
1 2
3
…
12 13