Menu
In a linear-gradient background I am creating a circle and inside that a small square. The circle is having a dodgerblue color and square should have the linear-gradient of body, but the problem is the position of linear-gradient of div element doesn't match with the body background.
I tried background:inherit With the div element, But the gradient doesn't match the body.
body {
background: linear-gradient(45deg, yellow, green);
background-size: 400% 400%;
}
.circle {
height: 150px;
width: 150px;
border-radius: 50%;
position: relative;
margin: auto;
background: dodgerblue;
}
.square {
height: 50px;
width: 50px;
transform: translate(250px, -100px);
background: inherit;
}<body>
<div class="circle"></div>
<div class="square"></div>
</body>
484
The problem with inheriting the background image of the body is the size difference from body and circle element. So what you actually want to achieve is a hole punch kind of layout element, which exposes a part of the body background.
Here is one approach with altered HTML, where the circle is a pseudo element of the circle element. The pseudo element will actually color the circle with it's box-shadow and will leave the transparent square visible.
body {
background: linear-gradient(45deg, yellow, green);
background-size: 400% 400%;
}
.circle-with-square {
height: 150px;
width: 150px;
border-radius: 50%;
margin: auto;
position: fixed;
align-items: center;
overflow: hidden;
display: flex;
flex-flow: column nowrap;
justify-content: center;
}
.circle-with-square::after
{
content: "";
height: 50px;
width: 50px;
display: block;
box-shadow: 0 0 0 150px dodgerblue;
}<body>
<div class="circle-with-square"></div>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
