Since I'm developing my own product and using a lot of gradient color as background color, as a new Front-end learner, this issue stuck me a while, so I would like to share the solution I found.

Requirement Introduce

As the picture shows.

This is one of the page in my product, I used the linear-gradient effect in the square.

Here is my CSS and html code:

<div className="h-32 w-32 rounded-[20px]">
  <div className="h-32 w-32 rounded-[20px] border square"></div>
</div>

.square {
  border-color: #eacb84;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.4),
    rgba(255, 255, 255, 0.2)
  );
}

In this product, user needs to choose square, so I want to add a new effect to show if user choose the square, as picture shows.

In the begining, I though this is very easy, only use hover and change background color can achieve the requirement. However, I was wrong, it didnt work.

Solution

Since I'm a self-learner of Front-end, I only found this solution, if anyone has better solutions, please share to me, I will update the article.

This is the reason why change backgound color doesn't work:

The priority of using linear-gradient as background color is higher then other simple backgound color, so change background color doesn't work.

The solution I found is using overlay + absolute to resolve the bug. Add a new div in front of the original square div and using absolute to cover the background-color of the square div.

Here is the code:

<!-- Remember to add relative, because we want the overlay div absolute and cover the square div  -->
<div className="relative h-32 w-32 rounded-[20px]">
  <!-- Because I use React.js, so when user choose specific div, this will add the div overlay. -->
  <!-- You can change the JS or handle event style according the framework you use. -->
  {selectedDiv === square.id &&
  <div className="overlay"></div>
  }
  <div className="h-32 w-32 rounded-[20px] border square"></div>
</div>

.overlay {
  /* position is absolute, cover the background of square div */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background-color: rgba(234, 203, 132);
  opacity: 0.4;
}

And that's done:

This is the issue and solution I faced in product and this stuck me a long while, I'm not sure there is other better solution, if you have any ideas, welcome to share to me, I will update in article.

Thank you!