Overview

As design trends march into the future, we are beginning to see multiple new avenues of creative UI design emerge.

These include new takes on glassmorphism, neomorphism, textured material design, and many others.

Today, you’re going to learn how to create one of the most popular UI background effects: aurora.

Defining Aurora

So what exactly is aurora? Definitions seem to vary slightly depending upon who you ask but the common denominator seems to be soft, subtle, and abstract gradients.

In short, something like this:

As-applied, it can look something like this:

And as you can see, it can really help add some depth to your designs.

Now that we know what aurora is, let’s talk about how you can reproduce this effect.

How to create Aurora effects

The absolute simplest way I know of creating aurora effects is by blurring a photo and adding some grain if you get fancy.

Let me show you exactly how you can do that directly in your design software, for this demo, I’ll be using Figma.

Grab a photo

To start, go on pexels and grab yourself a photo of a sunset.

Blur the photo

Add a blur effect to your photo and you want to crank it up to about 200.

Add some grain (if you want)

Finally, for some optional added texture, slap a grain screen on it and set the layer blending mode to “multiply.” To make this easier, I’ve included a noise/grain screen in the asset pack for you as well.

The final result will be very subtle, and now it’s time to drop it into your design.

And there we go; not too bad for a few minute’s work huh?

About that free bonus resource

Now I promised you a free bonus resource, and I fully intend to deliver.

You can get a pack of twenty pre-made aurora backgrounds and a noise screen for absolutely free, right here:

Bringing it all together

Today you learned how to create the popular aurora UI background effect in less than five minutes.

This is just one of many approaches, feel free to experiment and show us what you make, I’d love to see what you come up with!