DEV Community

loading...
Cover image for Aurora UI - how to create with CSS

Aurora UI - how to create with CSS

Albert Walicki
Hello, I'm Albert Walicki. I'm a frontend developer and cofounder of softwarehouse / design agency Hype4. I'm writing a book for Junior Frontend developers called Frontend Unicorn.
・3 min read

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.

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 header made with blurry shapes

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.

Three divs created an Aurora background

HTML

 <div class="wrapper">
  <div class="base one"></div>
  <div class="base two"></div>
  <div class="base three"></div>
</div>
Enter fullscreen mode Exit fullscreen mode

CSS

.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;
}
Enter fullscreen mode Exit fullscreen mode

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

Aurora background created with background-image

HTML

  <div class="wrapper"></div>
Enter fullscreen mode Exit fullscreen mode

CSS

.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;
}
Enter fullscreen mode Exit fullscreen mode

Blur an image

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

Image with filter:blur()

HTML

<div class="wrapper">
  <img src="ourImg.png"/>
</div>
Enter fullscreen mode Exit fullscreen mode

CSS

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

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 movment on circle path.

Animated background

HTML

  <div class="wrapper">
    <div class="base one"></div>
    <div class="base two"></div>
    <div class="base three"></div>
  </div>
Enter fullscreen mode Exit fullscreen mode

CSS

@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);
}
Enter fullscreen mode Exit fullscreen mode

You can play with all backgrounds here. 💪

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

Thanks for reading!

You can follow me on Twitter or sign up for my newsletter!

🐦 Twitter
💌 Newsletter
🦄 Frontend Unicorn ebook

Discussion (5)

Collapse
ziroock profile image
ziroock

I am relatively new at styling and using CSS and I have used radial gradients. However, it was a little bit monkey see monkey do. Your article brought a lot of clarity about certain CSS behaviors.

Awesome, educational and easy read! Thank you!

Collapse
albertwalicki profile image
Albert Walicki Author

Thank you for reading it! 💕

I'm glad that my article helped you. It's really motivating 💪

Collapse
barelyhuman profile image
Reaper

I like the animated one, though I don't really add that many animations in sites I build.
I'll still bookmark this.

Collapse
astrit profile image
Astrit

I love how you are able to do this these days just awesome.

I did something similar with backdrop-filter
codepen.io/astrit/pen/MWeMgor

Collapse
albertwalicki profile image
Albert Walicki Author

Hey Astrit!
I guess there are more ways to do the same effect. There are no rules to do it 😄

Forem Open with the Forem app