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!