/* makes your image darker */
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url(your image location)body{
background:
/* top, transparent black, faked with gradient */
linear-gradient(
rgba(0, 0, 0, 0.7),
rgba(0, 0, 0, 0.7)
),
/* bottom, image */
url(https://images.unsplash.com/photo-1614030424754-24d0eebd46b2);
}
Run code snippetbody {
display: grid;
place-items: center;
height: 100vh;
}
div {
width: 50vw;
height: 50vh;
background: linear-gradient(to bottom right, #55566a, #282834);
border-radius: 10px;
}