Aurora UI - how to create with CSS

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 Dribble or Behance.

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.

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

Blur an image

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

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); create movement on a circle path.

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

Thanks for reading!