https://i.sstatic.net/aHTv9.jpgI'm currently in the process of developing a website for fun, and I am interested in creating a visually appealing effect where 4 boxes are layered on top of each other and seamlessly blend into one another. However, I am encountering some challenges with achieving this desired effect.
.box2 {
position: absolute;
background-color: #333333;
border-radius: 15px;
left: 45px;
top: 30px;
width: 1750px;
height: 870px;
background: linear-gradient(to bottom right, #1a1a1a, #333333);
}
.box3 {
position: absolute;
background-color: #4d4d4d;
border-radius: 15px;
left: 150px;
top: 125px;
width: 1500px;
height: 700px;
background: linear-gradient(to bottom right, #333333, #4d4d4d);
}
.box4 {
position: absolute;
background-color: #666666;
border-radius: 15px;
left: 250px;
top: 250px;
width: 1300px;
height: 450px;
background: linear-gradient(to bottom right, #4d4d4d, #666666);
}<div class="box-container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>I have made attempts at using a linear gradient to achieve the blending effect without much success. Additionally, my search for a solution on platforms like Youtube did not yield any suitable results. Ultimately, my goal is to create a captivating frontpage where each box is prominently displayed while seamlessly blending into one another.