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
16
votes
2 answers

How to use mix blend mode in flutter?

I have tried the blend mode that seems to be working for only color i.e colorblendmode. Is there any way to achieve the mix-blend-mode as of CSS? Stack( children: [ Image.asset( "asset/text.PNG", …
sid
  • 407
  • 5
  • 13
13
votes
3 answers

Change text color black to white on overlap of bg

I have a div that is positioned absolute with a background color gradient. I have this text on it that I want to change to the color white as I scroll the text up. I'm using the 'mix-blend-mode' property to achieve this currently but I can't find…
playingwithnumbers
  • 308
  • 1
  • 9
12
votes
4 answers

Thicker text after applying mix-blend-mode: difference

What I want to do, is to create interface that will change color, depending on the color of the background, to make text always readable. So far everything works fine. I've recorded my browser to show a working example: From my research, I've…
Tanuki
  • 175
  • 1
  • 11
11
votes
3 answers

conflict between mix-blend mode and animation

If you use animation effect before mix-blend-mode property you will not get mix blend mode. Once you remove the animation class or disable animation, then mix-blend-mode will work. What is the problem? I spent hours to solve just this simple thing.…
Vosidiy Muslimbek
  • 111
  • 1
  • 5
10
votes
3 answers

Stacking circles produces a black bar on border radius

I have quite the puzzling enterprise here. I'm building a mouse which serves as a 'torch / searchlight'. All text (inline elements, buttons, you get the point) gets inverted from the usual white to black if there is a hover happening on it, the…
roberrrt-s
  • 7,914
  • 2
  • 46
  • 57
10
votes
1 answer

Does CSS mix-blend-mode work with transform?

Apparently mix-blend-mode doesn't play nice with transform: translate() and z-index. Applying any of these to some text element will immediately cancel the mix-blend-mode affect. Questions Is this a known limitation? Is there a CSS-based…
Shukri Adams
  • 851
  • 1
  • 12
  • 30
9
votes
1 answer

Apply blend mode to drop-shadow only

Is it possible to blend only the drop-shadow of an element with the color of the element it is overlapping? For example: I have one element overlapping the other. The element on top has a light-grey drop shadow. The element below is black. I don't…
mannystar
  • 93
  • 1
  • 1
  • 5
8
votes
1 answer

mix-blend-mode issues in Chrome

I've been trying to use the mix-blend-mode on a page that has contains instances of css opacity transitions. What appears to be happening is that the div containing the mix-blend-mode displays as it would without the blend mode during the…
Henry
  • 81
  • 1
  • 3
8
votes
1 answer

mix-blend-mode scroll lag issues

Just using 'mix-blend-mode:overlay' on a text element and it causes my browser to scroll really slow while the text is in the screen view. As soon as you scroll past the text item, the scroll goes back to butter smooth. The lag effect, which affects…
Danny
  • 81
  • 1
  • 2
7
votes
1 answer

CSS: how to have transparent background with the blend mode only affecting/being clipped to the (text) content?

Here is the code I have. I think it's fairly obvious what I am trying to achieve - I want to remove the black background behind the text, however, when I simply remove the black background css, the gradient layer just shows, since it's not clipped…
CssProblem
  • 245
  • 3
  • 8
7
votes
0 answers

Adding transform to parent breaks mix-blend-mode

I'm working on site where I need to animate divs that move over a sibling and apply a mix-blend-mode. I'm working with a library that create 2 divs the wrap around the blending element. The library also adds a transform to the direct parent, which…
Iltimas Doha
  • 71
  • 2
7
votes
2 answers

black and white text based on background image with css

I am trying to achieve this effect of a black and white text on a bi-colored header which is always white on a side, and with a background image on the other side (of different colors). this is the css used for this example, which works only…
valerio0999
  • 11,458
  • 7
  • 28
  • 56
7
votes
0 answers

Dark Mode getting messed up with intersectionObserver

I've been working on a site and I decided to add a dark mode feature to it, I used the darkmode.js library to implement it , the library works on the principle of mix-blend-mode: difference. However, when I add a scroll animation to it using…
Himanshu Sardana
  • 123
  • 2
  • 10
7
votes
1 answer

How to use CSS combination of mix-blend-mode and isolation?

I have a parent element with a red background. I want an h2 element to blend just some words with the background, and other words, inside a span tag, no. My example below is not working. How to make it work? .bg-red { background:…
sigmaxf
  • 7,998
  • 15
  • 65
  • 125
7
votes
1 answer

How to apply mix-blend-mode while keeping text opaque?

I need some help recreating this in CSS (if possible) : And here is what I have so far: .bg { background-image:…
mc5
  • 93
  • 1
  • 5
1
2 3
…
12 13