<h1>Aurora UI</h1>

<div class="blurred">
  <h2>Blurred shapes</h2>
  
  <div class="wrapper">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
  </div>
</div>

<div class="radial">
  <h2>Radial gradient</h2>
  <div class="wrapper"></div>
</div>

<div class="image">
  <h2>Blur on image</h2>
  <div class="imageWrapper">
    <img class="gradientImage blurredImage" src="https://www.albertwalicki.com/static/img-29152a5b2f178b9e11355047a5650ecd.jpeg" alt="">
    <button class="btn">Toggle blur!</button>
  </div>
</div>

<div class="animated">
  <h2>Animated background</h2>
   <div class="wrapper">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
  </div>
</div>



<span><a href="https://www.albertwalicki.com/aurora-ui-how-to-create?utm_source=codepen&utm_medium=link&utm_campaign=codepen_aurora">Mine article about Aurora UI</a></span>
* {
  box-sizing: border-box;
}

body {
  background: #0e0e0e;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 100px;
  font-family: Helvetica, Arial;
  > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 100px;
  }
}

h1 {
  color: #fff;
  font-size: 52px;
}

h2 {
  color: #fff;
  font-size: 36px;
}

.wrapper {
  width: 400px;
  height: 400px;
  background: #fff;
  position: relative;
  overflow:hidden;
  border-radius: 40px;
}

.wrapper div {
  position: absolute;
  filter: blur(60px);
  opacity: 0.8;
}


// Basic blured shapes

.blurred {
  .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;
  }
}


// Radial gradient

.radial {
  .wrapper {
    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;
  }
}


// Blurred image

.image {
  .imageWrapper {
    height: 400px;
    position: relative;
    overflow:hidden;
    border-radius: 40px;
  }
  .gradientImage {
    width: 100%;
  }
}

.gradientImage.blurredImage {
  filter: blur(60px);
}


// Blurred animated shapes

.animated {
  .one {
    border-radius: 100%;
    width: 600px;
    height: 600px;
    background-color: #373372;
    left:-50px;
    top:-300px;
    z-index: 3;
    animation: fly 12s linear infinite;
    transform:rotate(0) translate(80px) rotate(0);
  }

  .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;
    animation: flyPlus 8s linear infinite;
    transform:rotate(0) translate(100px) rotate(0);
  }
}


@keyframes fly {
  100% {
    transform:rotate(1turn) translate(100px) rotate(-1turn);
  }
}

@keyframes flyPlus {
  100% {
    transform:rotate(-1turn) translate(100px) rotate(1turn);
  }
}


.btn {
  padding: 10px 20px;
  background: #373372;
  color: #fff;
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  &:hover {
    opacity: 0.8;
  }
}

span {
  background:#fff;
  position:fixed;
  bottom:0;
  right:0;
  a {
    padding: 8px 12px;
    font-family: Arial;
    color: #000;
    display: block;
  }
}
View Compiled 
const btn = document.querySelector('.btn');
const image = document.querySelector(".gradientImage")

btn.addEventListener('click', () => image.classList.toggle("blurredImage"))

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.