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

Different result when using mix-blend-mode and background-blend-mode

I've noticed that when using mix-blend-mode the result is different than when using background-blend-mode even though you're using the same blending mode. For example, compare the 2 results below: I've copied in my setup and JSFiddles…
user2019515
  • 4,495
  • 1
  • 29
  • 42
7
votes
3 answers

Multiply mode in CSS?

In Photoshop if you import a JPG image with a white background into a document with a blue background, you can make the white background of the image disappear by setting the image to "multiply" mode. Can I do exactly the same thing with CSS alone?
drake035
  • 3,955
  • 41
  • 119
  • 229
5
votes
1 answer

Change text color to white on any non-white background

Changing the text color to white when the background color is black works great using mix-blend-mode: difference. Move the mouse to the text to see the effect: const blackBox =…
Tholle
  • 108,070
  • 19
  • 198
  • 189
5
votes
0 answers

CSS: mix-blend-mode makes transform not work anymore (Chrome, Firefox)

Seems like mix-blend-mode: multiply makes any transform not work anymore. This happens in Chrome and Firefox, while on Safari it works. (All updated to the last version) In this fiddle you can see the behaviour: fiddle (Sorry if it's a bit messy,…
Andrea Nessi
  • 51
  • 2
5
votes
1 answer

Why don't CSS blend modes work when applied against the document body?

Here's an example of CSS blend modes working against a specified "background" element: body { position: relative; } .background { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background:…
benjaminben
  • 113
  • 2
  • 7
5
votes
1 answer

Did Chrome / Safari recently change the way mix-blend-mode is handled

I made a webpage a couple of weeks ago, using the (then) recent version of Chrome (probably v56 or v57 but i dont know for sure), Safari and Firefox during development (on OSX). http://dirkluetter.de/projecttype/kamera Firefox (v52 & v53) still…
Hans Meiser
  • 256
  • 3
  • 11
4
votes
1 answer

css mix-blend-mode: difference issue in safari

I am trying the below mouseover effect using mix-blend-mode. It is working as expected in Chrome and Firefox. .btn-anim { position: relative; display: inline-block; overflow: hidden; padding: 1.25rem; color: #fff; --x: 66%; --y:…
Felix A J
  • 6,300
  • 2
  • 27
  • 46
4
votes
1 answer

cursor color - smooth transition between diferent backgrounds

On a website I'm creating there is a cursor that needs to change its color smoothly. When it is on a white background the cursor needs to be the blue #0059ff (this is important and I will explain why later on) and when it is on blue then the cursor…
ciekals11
  • 2,032
  • 1
  • 10
  • 24
4
votes
1 answer

What is causing the bug in "mix-blend-mode mode" with .mp4 on Firefox?

I am trying to use mix-blend-mode with a mp4 in the background. The idea is to have div with some text and have the video play in the background for an effect on the letters. This works perfectly with every browser besides Firefox. On Firefox the…
rockon_d
  • 1,094
  • 2
  • 8
  • 21
4
votes
2 answers

Backdrop filter not working when mix blend mode of another element on the page is changed

The browser version is Chrome 87.0.4280.88 Here is how I accidentally detected this bug: There are two independent divs on the page and both are position: fixed; One of them has a hover effect with which its mix-blend-mode is changed. The other…
HolyResistance
  • 594
  • 1
  • 8
  • 26
4
votes
0 answers

Mixing RYB colors with mix-blend-mode

Currently I'm working on an online educational tool for a beginners arts class. To visualise the mixing of colours, I created 3 draggable circles (RGB) for mixing light with a screen blend mode. This works! But now I want to accomplish the same…
Tijgerbrood
  • 61
  • 3
4
votes
2 answers

Mix blend mode background with child content unaffected

I am trying to use mix-blend-mode to create a background with a multiply effect overlay that also reveals part of the background. I also need the child content not to be affected by the blend mode. Like this: I've tried setting the blend-mode to…
orlafitz
  • 101
  • 1
  • 10
4
votes
1 answer

How to get mix-blend-mode scroll effect using javascript?

I'm looking for a way to change the background color of a certain element based on the background. What you can do in css with mix-blend-mode but I want to be able to set the color. Preferable I can use the same trick with an SVG. To show what I'm…
Michiel
  • 1,061
  • 10
  • 17
4
votes
1 answer

Why can't I apply css filters after mix-blend-mode?

I have some html text and would like to apply some css to do the following to the pixels of the text: Apply the Difference Blend Mode with the pixels underneath. Apply a Greyscale Filter. Apply a Contrast Filter with a very high setting. This…
Blasmo
  • 458
  • 3
  • 18
4
votes
1 answer

CSS blending with objects outside stacking context?

I am building a "hero area" at the top of my page using a CMS. It has a background image, some text, and a couple button links. I want my buttons to mix-blend-mode:multiply with the background image. My problem is that the default CMS CSS puts the…
Jeff
  • 13,943
  • 11
  • 55
  • 103
1
2
3
…
12 13