Gradient Blend Multiple Images

Question

How to make multiple images gradient blend to each other at only certain area as in the attached image below using CSS?

What I\'ve tried:

Answer 1

You can combine the background: linear-gradient() with Flexbox to achieve something like this:

div {
  display: flex; /* displays flex-items (children) inline */
  justify-content: space-around; /* horizontal alignment / icons are evenly distributed with equal space around them, i.e. all have equal space on both sides, that's why there are two units of space between them / you can also experiment with other values such as: "space-between", "space-evenly", "center" etc. */
  align-items: center; /* vertically centered */
  height: 100px;
  background: linear-gradient(to right, #c3986b 45%, #0a4b67 55%); /* adjust the % to your needs, the sum of both needs to evaluate to 100% */
}

img {border-radius: 50%}

In the given example I've made the linear-gradient() to be 10% of parent's width. The number is calculated by subtraction of both values in %, 55% - 45%.

In order to increase its width, if so desired, just increase the bigger number and decrease the lower one, preferably by the same amount of %, e.g. 40% / 60%, to leave it horizontally centered. For decreasing its width, just do the opposite.