javascript - Blending 2 elements background colors using CSS - Stack Overflow

admin管理员组

文章数量:1392110

I need to blend the background colors of 2 elements using CSS I have been fiddling around with the background-blend-mode:multiply but that works only when I have the 2 colors in the same element.

I need to achieve something like this -

---

I have been searching a lot but haven't been able to figure it out. Most helpful resource I found was New blending features in CSS which shows how to do it using Canvas. Is it possible to do the same thing using CSS?

EDIT

---

The circles above were just an example to show what I needed. As I mentioned, I was looking for blending colors for 2 different elements. I have created a fiddle for my actual shapes that I need to blend. /

I need to blend the background colors of 2 elements using CSS I have been fiddling around with the background-blend-mode:multiply but that works only when I have the 2 colors in the same element.

I need to achieve something like this -

---

I have been searching a lot but haven't been able to figure it out. Most helpful resource I found was New blending features in CSS which shows how to do it using Canvas. Is it possible to do the same thing using CSS?

EDIT

---

The circles above were just an example to show what I needed. As I mentioned, I was looking for blending colors for 2 different elements. I have created a fiddle for my actual shapes that I need to blend. http://jsfiddle/fmgfsr4o/2/

• javascript
• html
• css
• photoshop

Share Improve this question Follow edited Jan 11, 2019 at 2:04 jpaugh 7,06555 gold badges4444 silver badges9494 bronze badges asked Aug 29, 2014 at 10:49 KshitizKshitiz 2,96066 gold badges3535 silver badges4242 bronze badges 7

• I found this question that might help. – Laurent S. Commented Aug 29, 2014 at 10:56
• 1 did you try using multiple background on the same element ? something like this: first background is a red circle on the left, second one is a green circle on the right. I think you can draw it in pure CSS, maybe with some gradients or similar. Also you can try to play with CSS pseudo elements (:after and :before) – pomeh Commented Aug 29, 2014 at 10:56
• Basically...No. Blend modes are not yet available in CSS and there is no CSS alternative. You might be able to do something in JS though. – Paulie_D Commented Aug 29, 2014 at 11:26
• @Paulie_D CSS blend modes seems available in latest Firefox, Chrome and Opera, and even in Chrome for Android, check it out: caniuse./#feat=css-backgroundblendmode – pomeh Commented Aug 29, 2014 at 11:31
• It's a Candidate Remendation at the moment so it's not really something we should be using in production just yet. – Paulie_D Commented Aug 29, 2014 at 11:50

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 1

You can bine CSS multiple background with radial-gradients to achieve this effect:

CSS

div {
  /* adjust the width of the container to adjust circle's
     overlap size and shape */
  width: 80px;
  height: 50px;
  /* for debug purpose only */
  border: solid blue 1px;

  background:
    /* draw the red circle */
    radial-gradient(red 0%, red 70%, transparent 70%, transparent 100%) 0 0,
    /* draw the green circle */
    radial-gradient(green 0%, green 70%, transparent 70%, transparent 100%) 0 0;
    /* the red on the left, the green on the right */
  background-position: top left, top right;

  /* you can make then bigger or smaller */
  /* but you have to change width size above too */
  background-size: 50px 50px;
  /* You want both circles to appears once only */
  background-repeat: no-repeat;

  /* you can try with other values too */
  /* https://developer.mozilla/en-US/docs/Web/CSS/background-blend-mode */
  background-blend-mode: multiply;
}

HTML

<div></div>

I have done a JSFiddle for you to try: http://jsfiddle/pomeh/07nLpwwj/

This is the result I get using Firefox 31:

Even if the browser support seems "correct" (see here http://caniuse./#feat=css-backgroundblendmode), please note that the background-blend-mode property has the Candidate Remendation status for now, so be careful when using it (thanks to @Paulie_D for pointing that out).

Try this pure CSS3, although you will need to figure out how to position the circles.

html {
height: 100%;
background:
    repeating-radial-gradient(
        circle,
        transparent,
        transparent 3.5em,
        tomato 1em,
        tomato 4.5em
    ),
    repeating-radial-gradient(
        circle,
        transparent,
        transparent 3.5em,
        dodgerblue 3.5em,
        dodgerblue 4.5em
    );

background-blend-mode: multiply;
background-size: 10em 10em;
background-position:
    0 0,
    5em 5em,
    10em 5em;
}

JSFiddle

本文标签： javascriptBlending 2 elements background colors using CSSStack Overflow