How To Create an Aurora UI Using CSS

A look at the new UI design trend from a developer’s point of view

Photo by BRDNK Vision on Unsplash.

Design trends are like JavaScript frameworks — there’s a new one every day. Today, I would like to introduce you to a design trend called Aurora UI. My friend Michal Malewicz came up with the name, and you should read his article on the topic.

Let’s take a look at Aurora UI.

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 and Behance.

Stripe.com header.

Its 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 like so:

• The first one on top of the container
• Two in the bottom corners

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

Three divs creating an Aurora background

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 ranging from a solid colour to a transparent one:

• Top left
• Top right
• Bottom left

Aurora background created with background-image

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()

Animated Background

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

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

Animated background

You can play with all backgrounds on CodePen.

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

Thanks for reading!