Thread by @Prathkum

Aurora UI is a latest visual trend in 2021. Let's see how we can create that using CSS in 4 simple steps

Thread 🧵👇🏻

You can create beautiful aurora design hardly in 10 minutes. It is all about creating mesh gradients.

You can create gradient backgrounds using `linear-gradient()` or `radial-gradient()` but here we are creating cambered gradients

{ 2 / 8 }

Step 1️⃣: Create container

Just create a simple div with fixed height and width.

{ 3 / 8 }

Step 2️⃣: Create four distorted shapes

We need to create four random shapes inside container. You can create those shapes using height, width and border-radius property.

{ 4 / 8 }

Check out this cool site for creating random shapes using border-radius

🔗 9elements.github.io/fancy-border-r…

{ 5 / 8 }

Alright moving further

Step 3️⃣:

Next thing you need to do is to add "overflow-hidden" in container element.

{ 6 / 8 }

Step 4️⃣: Blur

The final and last step is to add some blur and blending so that four shapes can merge into each other and show us the gradient look.

{ 7 / 8 }

As simple as that 😄

Check out the full source code here: codepen.io/prathkum/pen/b…