<!doctype html>
<html>
<link href="https://fonts.googleapis.com/css?family=Federo" rel="stylesheet">
<style>
html, body {
margin: 0;
}
* {
box-sizing: border-box;
}
.bg {
/*background-image:*/
/*linear-gradient(to bottom, #484848 0, #363636 100px, #363636 500px, #181818);*/
background-color: #363636;
width: 600px;
height: 600px;
position: relative;
}
.clouds {
background-image: url(./reflections-clouds2.png);
z-index: 68;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.inner {
background-color: rgba(255, 255, 255, 0.5);
background-image:
linear-gradient(to bottom, rgba(103, 128, 87, 1), rgba(255, 255, 255, 0) 50%),
linear-gradient(to left, rgba(107, 113, 128, 1), rgba(255, 255, 255, 0) 50%),
linear-gradient(to top, rgba(128, 82, 77, 1), rgba(255, 255, 255, 0) 50%),
linear-gradient(to right, rgba(126, 87, 128, 1), rgba(255, 255, 255, 0) 50%);
position: absolute;
top: 200px;
left: 200px;
width: 200px;
height: 200px;
z-index: 2;
}
.circle {
z-index: 50;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #363636;
position: absolute;
}
.artist, .title {
z-index: 1000;
font-family: Federo;
color: rgba(255, 255, 255, 0.9);
width: 100%;
position: absolute;
left: 0;
text-align: center;
text-shadow: 1px 1px 1px black,
2px 2px 1px rgba(255, 255, 255, 0.25);
}
.artist {
font-size: 40px;
top: 50px;
}
.title {
font-size: 28px;
bottom: 50px;
}
.circle-shadow {
position: absolute;
top: 300px;
left: 300px;
width: 200px;
height: 200px;
z-index: 60;
}
.circle-shadow .shadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
z-index: 60;
/*border: 1px solid rgba(255, 255, 255, 0.4);*/
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
}
.circle-shadow [class*="mask"] {
z-index: 61;
position: absolute;
background-color: #363636;
}
.circle-shadow .maskh {
width: calc(100% + 5px);
height: calc(50% + 5px);
}
.circle-shadow .maskv {
width: calc(50% + 5px);
height: calc(100% + 5px);
}
</style>
<body>
<div class="bg">
<div class="clouds"></div>
<div class="artist">Tommy Montgomery</div>
<div class="title">Reflections</div>
<div class="circle" style="top: 100px; left: 100px"></div>
<div class="circle" style="top: 100px; left: 300px"></div>
<div class="circle" style="top: 300px; left: 100px"></div>
<div class="circle" style="top: 300px; left: 300px"></div>
<div class="circle-shadow" style="top: 100px; left: 100px;">
<div class="shadow"></div>
<div class="maskv" style="left: -5px; top: -5px"></div>
<div class="maskh" style="left: -5px; top: -5px"></div>
</div>
<div class="circle-shadow" style="top: 100px; left: 300px;">
<div class="shadow"></div>
<div class="maskh" style="left: -5px; top: -5px"></div>
<div class="maskv" style="left: 50%; top: -5px"></div>
</div>
<div class="circle-shadow" style="top: 300px; left: 100px;">
<div class="shadow"></div>
<div class="maskh" style="left: -5px; top: 50%;"></div>
<div class="maskv" style="left: -5px; top: -5px;"></div>
</div>
<div class="circle-shadow" style="top: 300px; left: 300px;">
<div class="shadow"></div>
<div class="maskh" style="left: -5px; top: 50%"></div>
<div class="maskv" style="left: 50%; top: -5px"></div>
</div>
<div class="inner"></div>
</div>
</body>
</html>