Aurora UI — New Visual Trend for 2021

by Mar 8, 2021DIY Coding, UX0 comments

Aurora UI

UI design and especially its more artistic, visual side is constantly evolving. While most current products repeat the same, trusted and well-known IA patterns, UI and the Value Proposition are the biggest differentiators the product can have.

Nobody is going to try and redesign a registration process that works well in thousands of other apps — we’ll tweak it, for sure, and hopefully with some research, but in the end, it will just be a copy of what the users already know.

All the morphisms

Both Neumorphism and Glassmorphism were the response to the design trend pendulum swinging back from forced minimalism. The momentum here was just as big as when it was swinging the other way around — from Skeuomorphism all the way to functional minimalism of Material Design and Modern design trends.

I’d say it takes about 7 years for a design trend to start reversing (give or take). The wooden backgrounds and stitched leather of the first iPhone (2007) gave way to minimal designs of iOS 7 (2013), and 2020 started bringing the real world, organic inspirations right back.


iMessage icon stages

Sure, the last one is 3d only in the Desktop OS, but it is testing the waters for a return of 3D.

With both the usage of the frosted glass aesthetic (both Microsoft and Apple), skeuomorphic icons (Mac OS Big Sur update) people have generally reacted positively to the change.

We wanted the products we use to be “crafted” and have a soul, instead of being a utilitarian white-label from a design system (like Material Design).

There’s nothing wrong with minimalism, even in its extremes, but it does make everything blend together into a mass of sameness. The design diversity has been diminishing long enough. The users want change. The Android examples above just look boring in the most utilitarian way. Some would argue that that’s ok, that boring is good. But our lives are not about just accomplishing tasks on some to-do lists. We want to be delighted.

The new, skeuomorphic drive of all of these new trends also comes from the craft culture having a revival. Instead of another minimal, uninspiring IKEA table, we crave uneven wood that has a texture and a life for our homes. Same goes for wallets, backpacks, clothing, and more. We want the things we use to be “hand-crafted” rather than mass-produced.


ikea table vs real wooden table

Both dining tables are just as functional, but most people would prefer to eat from the one on the right.

Hello, Aurora

The main problem with interfaces, however, is that they can’t really get too “funky”, or they’ll stop being functional. So how can we marry function with a form that looks beautiful and “organic”?

You know, just like the Northern Lights, which I think is a fitting name for this background type.


Image for post

Photo by Mike Swigunski on Unsplash

If the interface itself (the buttons, the fields, the labels) can’t really change that much, it’s up to the backgrounds to differentiate. This is the basic principle behind all the “morphisms” and this new Aurora style.

Use the minimal design for everything that’s functional, and play around with ornamentation only. If done right, it also has the benefit of being accessible, because the actual interface — i.e. the things you use are accessible. So if someone can’t see some subtle background gradients, all they’d be missing is decoration.

This is also why I believe Neumorphism CAN be accessible if it’s just used for the cards and the cards have a proper hierarchy. Just don’t use it for text-fields, buttons and so on, and the contrast is going to be a non-issue.

Mixing “creative” backgrounds with minimal UI components is the best compromise between functionality and accessibility, but as with everything accessible it has to be done right.


Big Sur Wallpaper with Glassmorphism and a blurred version of the wallpaper next to it.

Big Sur Wallpaper with Glassmorphism and a blurred version of the wallpaper next to it.

Glassmorphism certified

Before we get to the backgrounds, it’s worth mentioning that this style works particularly well with Glassmorphism, and Apple knew it by creating a less blurred version of irregular color patterns as their main Big Sur wallpaper.

Apple and Microsoft are leading the way in exploring these new trends, but they’re not the only ones anymore.


Stripe uses aurora backgrounds and glassmorphism

Stripe is a good example of a popular, mainstream company using both Aurora backgrounds AND glassmorphic elements, but keeping the important UI clear and readable.

How to start?

You can use your existing interface components with this style, as long as they have good enough contrasts, sizes and touch targets.

There are three main ways that you can use to create this effect.


blurred shapes aurora

Blurred shapes

The blurred shapes method is all about making irregular (preferably oval) shapes and then blurring them and mixing together to create an irregular gradient.


Image for post

Multiple Gradient fills

This method is a mix of gradient fills (radial work best) with decreasing opacity towards the outer edge of the fill. Just drag the handles around to find the best mix. The more the transparent, outer-edge overlaps the more the colors will blend. You can also merge this method with the first one for something even more custom.


Image for post

Just blur a photo

If you have a photo that already has a couple of soft color transitions, you can blur (with maximum blur value) the photo and have this organic effect with minimal effort.

I also made two videos on how to achieve this effect in Figma and Sketch. Here’s the first one:

Next steps

Then simply pick your preferred overlay style (glassmorphism, standard transparency or opaque) and you have yourself a nice looking Aurora style UI.


aurora UI

Make sure the important interface elements are all accessible, and have your UI stand out from the crowd, at least until everyone else blurs their backgrounds and the pendulum will start swinging back again.

We should still have a couple of years (of experimentation) before that happens.

Written by:

👉 My UI book: 👉 My Design YouTube: 👉 We build apps at
Digital iamge of rocket shooting out of a laptop with a xblu logo and a litespeed logo
Feb 27 2023

The SEO Advantages of using LiteSpeed Web Server for WordPress sites

A LiteSpeed server is a type of web server software that is designed to handle and serve web pages and other internet content quickly and efficiently. It is a popular...
Feb 23 2023

Is ChatGPT a good tool to accomplish digital marketing objectives?

As an AI language model, ChatGPT is not a tool designed specifically for accomplishing digital marketing objectives. ChatGPT is designed to generate human-like text...
Abstract vivid colors landscape of desert mountains
Feb 23 2023

Creative Growth Ideas For A Small Digital Marketing Agency Startup

Partner with other small businesses: Partner with other small businesses that complement your services. For example, if you specialize in social media marketing,...
Abstract vivid colors landscape of desert mountains, dunes and clouds in a pink sky
Feb 21 2023

Digital Marketing Strategies for Start-ups

Get the most out of your digital marketing with Xblu - the smart and witty digital marketing agency. At Xblu, we understand that for start-ups and medium sized...
Google Maps on Mobile Phone in Hand
Sep 09 2021

Best practices in UX for dealer locators in 2021

Dealer locator software has significantly evolved in sophistication over the last 5-10 years. Historically, a relatively stagnant feature set dominated the user...
A spoon with little dots
Sep 03 2021

Replace your complex bar chart with a dot plot to make it better understood

Replace your complex bar chart with a dot plot to make it better understood The alternative to bar charts that works well with complex data Photo by Sharon McCutcheon...
people looking at stage with cell phone cameras
Aug 30 2021

Global Insights Briefing: Cautious optimism

Global Insights Briefing: Cautious optimism Each month, the Google Ads Research and Insights team analyzes data sets of billions of recent search queries and consumer...
A Blue Lemon
Jul 08 2021

Investing in creativity: A necessity for business transformation

Investing in creativity: A necessity for business transformation Susie Walker / March 2021 Susie Walker is the Head of Awards at Cannes Lions International Festival of...
Jun 10 2021

Maximizing every click

“Maximizing every click” is the name of a strategy I employed at G2, intending to capture users when they landed on our site. I’ve been a big advocate of the notion...
May 21 2021

What is Web3? The Decentralized Internet of the Future Explained

The Evolution of the Web The web has evolved a lot over the years, and the applications of it today are almost unrecognizable from its most early days. The evolution of...