Create a "Premium" Metallic Gold Effect in Figma (plus template)

Create a "Premium" Metallic Gold Effect in Figma (plus template)

Jump to the template👇

You know those fancy gold effects you see in app UIs like Robinhood or Tinder?

Sometimes you'll see it used for mobile game UIs, for in game currencies, achievements, or awards:

Screenshot from Candy Crush Saga showing gold bars and a gold progress bar
Image credit: come on. It's Candy Crush.

The use of gold as a color association to create feelings of exclusiveness and richness is one as old as time. Just go to any casino. Think that gold lighting and curtains are a mistake? Nope.

A casino with gold light fixtures and gold moulding on the ceiling

Or how about this credit card from AMEX?

A gold American Express credit card
Don't pay for credit cards.

Getting something gold for your money is cashing in (ha) on the age-old color association that gold is valuable. Even stuff that just... looks gold.

That's one of many tactics that credit card companies employ to get people to pay them to use their card.

In the example below, Tinder uses the gold effect to create a premium feel for people paying for their premium offering, Tinder Gold.

The app will even modify their UI elements after you've purchased Tinder Gold, by placing a gold app icon on your home screen:

App icon for Tinder Gold

This is done to create the feeling that you've purchased a special experience, that you're a member of a special "VIP" type group. Your app is gold, therefore, you have gold. You're a gold member.

Goldmember movie

ahem

Regardless of the use of color psychology and the endless and important ethical debates that come with design, it's a cool effect and can be useful to know how to use it in your UI designs.

You can also use it as a foundation to create other metallic treatments. And it's also not super difficult to create in Figma.

With that said...

There are two primary styles of gold we'll cover:

  1. Metallic satin gold
  2. Polished gold

And this is what they look like:

Comparison of two types of gold finishes: Satin Gold and Polished Gold

How to Create Satin Gold for Premium Offerings

Satin gold has a more luxurious feel to it, which means it's well-suited to premium app or websites offerings that want to give their purchasers a sense of luxuriousness or specialness.

To create a satin gold effect, first let's create our base shape. To start out, let's use a rounded rectangle with some really nice corner smoothing, because we like to have fun.

I used a 240px x 240px rectangle, and applied 64px corner radius with 100% corner smoothing to make it extra sassy:

64 pixel corner rounding, with corner smoothing turned all the way up
Sassy as heck

Then, with this shape selected, select the color picker under Fill and pick the Linear gradient option:

The creation of a linear gradient within the app icon shape

Now we can start building our gradient.

For the satin gold effect, we'll create 3 gradient points by clicking in the empty space above the gradient bar:

A 3rd color stop point is added to the gradient, in the center

And set them all to 100% opacity.

The opacity for all color stop points on the gradient is set to 100%

Next, since we want a luxurious gold feel, we'll select some slightly desaturated gold colors for both ends, and a lighter version or tint of that for the center. I'm using #EECB84 for the ends and #FFE5AE for the center:

All 3 stop points are changed to gold, dark on the left, light in the middle, and dark on the right
Ooh, so luxurious.

Finally, we'll set the gradient angle, keeping the handles aligned to the outer bounds of the shape:

The angle of the gradient is changed to 45 degrees
Annnd shift.

Wa la! Satin gold.

Finished satin old app icon with the label "let's eat tiramisu" next to it
Buy me

Next, let's tackle the shinier cousin: polished gold.

How to Create Polished Gold for Game-Like Elements

Polished gold is shiny, fun, and rich, which means it works well applied to components or visual elements like achievements, badges, currency, and anything else you might get as a reward in an app or game.

To create a polished gold effect, we'll start with our base shape again, and select linear gradient.

This time, we'll create 4 gradient points:

4 gradient color stop points are created
One extra point will make all the difference.

For the polished gold effect, we want to use a more rich and saturated color palette. This gold should almost feel "juicy" by comparison to the satin gold. Less luxurious, more stimulating.

For the gradient colors, left to right, I'm using #FDD792, #FEF9EB, #F9C475, and #D68E43.

All 4 gradient color stop points are changed to gold, darker on the outside and lighter in the middle, one of them is almost white
Nice 'n juicy.

Then, just like the last one, we'll rotate our gradient angle.

The angle of the gradient is set to 45 degrees

We're still pretty satin-y. And we don't want any religious groups knocking on our doors, so we'll take a step back from satin-ism and polish our gold.

To do this, we'll change the distribution of the color points.

Take those two center color handles and move them so close to each other that they no longer fade, but occur immediately after each other:

The color stop points are brought closer together

And there we go! Like true alchemists, we've made polished gold:

A finished polished gold app icon with the text "sho shiny!" next to it, and some gold bars for comedic effect
Internet.

The real magic of these treatments comes out when you start to combine them. For example, if we combine satin and polished gold to create an alternate version of the logo for Tinder Gold, we get some interesting results:

A combination of polished and satin gold shows contrast
Cool looking, but low contrast — there's a reason the real logo is gold on white. Animation could help.

It's fun to experiment with different material treatments, but they should be used carefully and sparingly if at all.

Not all brands reserve space for gold or metallic treatments in the first place. And used in the wrong context or overused, it's very easy to create something gaudy and garish that actually doesn't benefit your brand or product.

So if you've made it to the end of this, thanks for joining me. While if I were you, I wouldn't go off and start making everything gold, learning how to create high quality metallic gradients in Figma is a useful tool to have in your back pocket as a UI designer.

I've used it more than once in my career, and so you may too.

As always please let me know if I missed something, or you have any feedback on this article. I want to make this the most practical and useful resource for anyone looking to improve their UI design skillset.

Additionally, if there's anything you'd like to know how to create in Figma, send it to me in an email and I'd be happy to make a tutorial.

Happy designing!

Use it today – download the template

Use it now! Get the Golden UI Elements Template ($5)

Includes everything you see in this post so you can deconstruct it or use it now.

Go to Download

UI design expertise on tap

Become a better designer in 10 minutes a day. Professional, bite-size design expertise delivered to your inbox.

The UI Lab

Great! You’ve successfully signed up.

Welcome back! You've successfully signed in.

You've successfully subscribed to The UI Lab.

Success! Check your email for magic link to sign-in.

Success! Your billing info has been updated.

Your billing was not updated.