CSS Blend Modes

HTML
<div class = "wrapper"> <div class="container"></div> <div class="circles"></div> <div class="logo"> <div class="orange"></div> <div class="purple"></div> <div class="blue"></div> <span class="css">CSS</span> <span class="blend-modes">Blend Modes</span> </div> </div>
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; }
JAVASCRIPT
Expand for more options Login