<div class="layout-grid"> <p> Aurora UI: Blurred shapes</p> <div class="wrapper__aurora-ui-shape"> <div class="base one"></div> <div class="base two"></div> <div class="base three"></div> </div> <p>Aurora UI: Blurred gradients</p> <div class="wrapper__aurora-ui-gradient"> </div> </div> <style> .layout-grid{ display: gird; grid-template-columns: auto; } .wrapper__aurora-ui-shape { width: 400px; height: 400px; background: #fff; position: relative; overflow:hidden; border-radius: 40px; } .base { position: absolute; filter: blur(60px); opacity: 0.8; } .one { border-radius: 100%; width: 600px; height: 600px; background-color: #373372; left:-50px; top:-300px; z-index: 3; } .two { width: 500px; height: 800px; background-color: #7C336C; bottom:-30px; left:-80px; } .three { border-radius: 100%; width: 450px; height: 450px; bottom:-80px; right:-100px; background-color: #B3588A; } .wrapper__aurora-ui-gradient { width: 400px; height: 400px; position: relative; overflow:hidden; border-radius: 40px; background-color: #fff; background-image: radial-gradient(at top left, #F0ACE0, transparent), radial-gradient(at top right, #FFA4B2, transparent), radial-gradient(at bottom left, #A7D3F2, transparent); background-size: 100% 100%; background-repeat: no-repeat; } </style>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter