css11 Mar 20213 min read

Aurora UI - how to create with CSS

Design trends are creating like a new javascript framework. Some of them are good and accessible to all users, and some of them are not.

Albert Walicki · frontend developer in Gdańsk

Design trends are changing like new javascript frameworks - at least one a day. 😄 Today I would like to introduce you to another trend named by my friend Michal Malewicz. it’s called Aurora UI, and you can find here an article written by Michal.

let’s take a look at it.

What is the Aurora trend?

This trend is not that new. For example, Stripe has been using it in their header for a long time. it’s getting more popular on services like Dribbble or Behance.

Stripe.com

it’s characteristic features are:

blurred shapes
similar colours
smooth transitions between colours

How to create it with CSS?

There are at least three ways to create this effect.

blurred shapes
blurred gradients
blurred images

Blurred shapes

The first method is to create three ovals overlaying on each other. Create big ones and position them:

first one on the top of the container
two in the bottom corners

Then we need to add filter: blur() and lower the opacity slightly.

<div class="wrapper">
  <div class="base one"></div>
  <div class="base two"></div>
  <div class="base three"></div>
</div>

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

Preview

Radial gradient

The second method is to use gradient colours! Instead of solid colours, we can use a radial-gradient to create our effect.

let’s add three radial-gradients from a solid colour to transparent:

top left
top right
bottom left

<div class="wrapper"></div>

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

Preview

Blur an image

The easiest way to create this effect is... to choose a good image and add some filter: blur(). 😄

<div class="wrapper">
  <img src="ourImg.png"/>
</div>

.wrapper {
  height: 400px;
  position: relative;
  overflow:hidden;
  border-radius: 40px;
}
img {
  filter: blur(60px);
}

Preview

Animated background

You can also animate your backgrounds to make them look better! Here is a small example of rotating backgrounds. 🚀

I used transform:rotate(1turn) translate(100px) rotate(-1turn); to create movement on the circle path.

<div class="wrapper">
  <div class="base one"></div>
  <div class="base two"></div>
  <div class="base three"></div>
</div>

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

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

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

Preview

You can play with all backgrounds here. 💪

And that’s it! You can combine Aurora with glassmorphism to create an even better UI.

Thanks for reading!

css design trends

Aurora UI - how to create with CSS

What is the Aurora trend?

How to create it with CSS?

Blurred shapes

Radial gradient

Blur an image

Animated background

Got something that needs building?