CSS
.wrapper {
width: 100%;
display: inline-block;
position: relative;
}
.wrapper:after {
padding-top: 66.666%;
display: block;
content: '';
}
.wrapper > div {
top: 0; bottom: 0; right: 0; left: 0;
position: absolute;
display: block;
}
.container {
background-image:
linear-gradient(rgba(27, 27, 27, 0.6), rgba(27, 27, 27, 0.6)),
linear-gradient(rgb(255, 238, 217), rgb(255, 238, 217)),
url("http://static.simpledesktops.com/uploads/desktops/2015/02/08/Bubbly-2880.png");
background-blend-mode: overlay, multiply, normal;
background-size: cover;
background-position: top;
background-repeat: no-repeat;
}
.circles {
background-image:
radial-gradient(circle, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15) 70%,transparent 70%, transparent),
radial-gradient(circle, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15) 70%,transparent 70%, transparent),
radial-gradient(circle, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15) 70%,transparent 70%, transparent),
radial-gradient(circle, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15) 70%,transparent 70%, transparent),
radial-gradient(circle, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15) 70%,transparent 70%, transparent);
background-size: 123.8% 185.7%, 103.1% 154.7%, 82.5% 123.8%, 61.9% 92.8%, 41.3% 61.9%;
background-position: 129% 41%, 658% 41%, -57.6% 41%, 0.6% 41%, 18% 41%;
background-repeat: no-repeat;
mix-blend-mode: overlay;
}
.logo div {
border-radius: 50%;
mix-blend-mode: color-burn;
position: absolute;
}
.logo .orange {
width: 23.7%;
height: 35.6%;
background-image: linear-gradient(120deg, rgb(242, 109, 109), rgb(237, 78,61));
top: 42%;
left: 16%;
}
.logo .purple {
width: 29.5%;
height: 44.25%;
background-image: linear-gradient(120deg, rgb(153, 109, 242), rgb(149, 78, 135));
top: 21.6%;
left: 21.7%;
}
.logo .blue {
width: 19.5%;
height: 29.2%;
background-image: linear-gradient(120deg, rgb(109, 153, 242), rgb(106, 109, 135));
top: 26%;
left: 11.5%;
}
.logo span {
font-size: 9vw;
letter-spacing: 6px;
color: rgb(255, 255, 255);
line-height: 1.2;
text-align: left;
position: absolute;
}
.logo .css {
font-weight: bold;
top: 41.5%;
left: 22%;
}
.logo .blend-modes {
font-style: italic;
font-weight: lighter ;
left: 39%;
top: 41.5%;
}
html, body {
height: 100%;
background-color: rgb(74, 74, 74);
overflow: hidden;
font-family: 'Oswald', sans-serif;
}
