How To Create Mesh Gradients in Figma (Beginner Tutorial)

Mesh and Aurora gradients are not only popular and beautiful-they're also very easy to create. In this step by step tutorial video you'll learn everything you need to create them yourself.
🔴 Working File: timgabe.com/resources/figma-m...
#figma #figmatutorial
➡️ QUESTION - Have a question about UI, UX or Product Design? Designing in Figma? Or Anything Else? Post in the comments section of this video-I’m happy to answer!

[@nicolekesselring3398]

your labeled artboards of "Apply color" "blurs".. etc to show each step was helpful! Thanks

[@hugocardenas2449]

This was an amazing tutorial, thank you so much Tim!

[@TimGabe]

appreciate you Hugo! really nice of you to both comment and post on Twitter 🤩🙏

[@tielcoelecdu4431]

very simple yet detailed work..great job..learned a lot thanks!

[@bahatiyves]

Your videos are really amazing and straight to the point. Thank you Tim

[@TimGabe]

that's amazing to hear, thanks my friend!

[@EDIRomanul]

Thanks mate, exactly what I wanted. The last part of the video is the most helpful.

[@TimGabe]

really happy you liked it, my friend 🥳

[@nikithasshenoy694]

amazing tutorial... thanks.. this was a real timesaver

[@aniives5495]

This was highly needed! Thanks a bunch Tim.🤞🏿

[@TimGabe]

that’s great to hear, Ani! really grateful for the support ☺️🙌

[@aniives5495]

@@TimGabe I’d try it out and would love to show you the outcome.

[@acya05]

Love-it! you are so underrated imo. Very adhd friendly clear, fun and super useful vids!! hope you'll get to you 100k follower milestone well like yesterday!! :D :D

[@nathansimula8058]

Amazing Tim, thanks for the tips !

[@TimGabe]

thanks a lot for the comment and encouragement, Nathan 🙏☺️

[@marekbitka7283]

Very nice resource!

[@digitalnomad29]

Beautiful...that was a great piece of art... Loved this tutorial..U just got another subscriber fan!!

[@TimGabe]

thanks a lot, friend!!

[@comedybites14]

Amazing tutorial and explanation. I randomly cliked on it and i found it super helpful. Keep growing buddy!

[@TimGabe]

really appreciate the kind comment and so happy that you found it helpful, Mudit! 🤩

[@HauNguyen-su4rb]

That's awesome! Thanks for sharing ❤

[@TimGabe]

thank you for supporting, Hau!!

[@lenaspektor1325]

Thank you so much for sharing🤩

[@prashlovessamosa]

You don't how much you helping me. Thanks for providing knowledge for free.

[@TimGabe]

comments like these 🙏 thank you for supporting me!!

[@jjn9750]

Very specific and helped a lot.👍

[@nguyenthanh1328]

Thank u bro 🤘 I've been looking for this tutorial for a long time 😩👌

[@TimGabe]

happy you found it, my friend 😃

[@aleks4307]

You are a shining silver angel in the dark quilt of the night. Thank you.

[@TimGabe]

haha, that's a very nice comment Aleks!! thanks a lot!!

[@dmaLab]

Fantastic video. Thanks Tim!

[@TimGabe]

thanks a lot, my friend!

[@kyt2245]

Amazing content! Thank you!

[@TimGabe]

really appreciate it, Kyt! 🤩

[@ambroUX]

Good explanation bro. Really helpful.

[@sahilak4351]

Nice, easy simple and plain explanation 👍🏻👍🏻👍🏻

[@TimGabe]

glad you liked it 🤩

[@anmol3457]

thanks a lot. I'm a noob trying to do this in my free time and it really helps.

[@TimGabe]

happy that it helps you, my friend 😃

[@Docutain22]

Thanks alot Tim

[@TimGabe]

appreciate the comment, larry!

[@maed73]

Amazing, Thank you so much :)

[@TimGabe]

you’re welcome Maedeh! ☺️ thanks for the comment!!

[@quadrifxNg]

Thank you so much

[@TimGabe]

thank you for commenting, my friend ☺️

[@DEV_XO]

Amazing!

[@TimGabe]

thank you, my friend! ☺️🙌

[@gungunparakh]

Amazing

[@TheJaitan]

Amazing. Thanks.

[@TimGabe]

happy to help, my friend!

[@SzabatDesign]

Great Content Bro! Thanks :)

[@TimGabe]

Christopher!! thanks a lot, my friend 🥳🙏

[@kureji9337]

bro ur gonna grow a lot bigger with your quality contents now that many people are interested in ux ui designing

[@TimGabe]

that would be amazing! I’m staying consistent and hope that it will pay dividends ☺️

[@TimGabe]

and thank you for the kind comment!! 🙏

[@alibekazimov3877]

Clean explain!!

[@TimGabe]

appreciate it, Alibek 🙏😃

[@tumon001]

Thanks bro!

[@TimGabe]

no worries, my friend!!

[@ferlomano1139]

Great!

[@TimGabe]

🤩

[@JustPlainRob]

Best gradient I ever made was just a picture of a pile of marshmallow Peeps blurred beyond recognition.

[@Commandraa]

😂

[@kashyap263]

tim bro is the real pro

[@TimGabe]

really appreciated, Kashyap! 🙏

[@Jab7kO]

Cool thing ;) thx!

[@TimGabe]

glad you liked it! 🤩

[@krishnakedia9343]

tHANKS BROTHER

[@TimGabe]

glad to help, krishna!!

[@cory_who]

Nice tuturial but some commands prompts on the screen would be helpful during your workflow ie: when you copied the base color and applied it to multiple objects (I have no clue how you did that). Thanks for the video!

[@TasfidMahfuj]

Thanks

[@TimGabe]

my pleasure! 💜

[@Fredricanderson]

Thank you for much for the clear instructions! I tried plugin but found it quite unhelpful because there were limited options to change it after the fact.

[@akenjinicole1499]

amazing

[@TimGabe]

glad you liked it!! 😃

[@MehediHasan-141]

very helpfull video thanks a lot love from bangladesh

[@TimGabe]

thank you so much, Mehedi! 🤩

[@user-zb5uh2fw5t]

It's exactly what I was looking for, thanks! :) What shortcut did you use to change color (01:19) ?

[@TimGabe]

so nice of you to drop by and comment! good luck on your journey, my friend!!

[@melodydaniel8043]

Can I make the mesh gradient a style to reuse on other components?

[@groeneveldagencynl]

2k likes!

[@psychedelicloli]

Nice

[@TimGabe]

thanks!!

[@azin84y]

thanks for this amazing lesson, I just wonder why my frame section doesn't have a clip content checkbox, I dont know what to do without it

[@TimGabe]

that's weird. are you sure you're targeting the frame? thank you so much for the comment!!

[@digitalnomad29]

Tim ... Your big fan from India.. 😊.. do u have a tutorial on gradient types like linear, radial, etc...and their best applications in design

[@TimGabe]

really appreciate the support!! i have a tutorial on the different gradiets inside of figma 😃

[@thecommunityenascruz2661]

very amazing.. thank you.. please how do i get this noise image

[@TimGabe]

if you search for "noise" in the community you should find multiple files!

[@yo-is4yx]

How do you use the mesh gradient in CSS later on? My only worry (as a designer) is that a dev team won't be able to develop it further.

[@TimGabe]

if you want to make it very easily transferrable, you could just make circles instead of random shapes. then your devs could just create divs with the correct sizes, colors and blur settings 😃

[@peterhobbs9107]

Fantastic Tim! Can these be exported as svgs?

[@TimGabe]

hey Peter! they can technically be exported as .svgs, but I'm not sure how they'll render though... probably better to go with .pngs and compress them 😃

[@peterhobbs9107]

@@TimGabe Makes sense Tim. Thank you. So appreciate all you do.

[@TimGabe]

appreciate the kind comments, Peter 🙏😃

[@frederikkedahl4508]

Great video! (Y) how do you scroll through the colors at 5:00?

[@TimGabe]

you can target the hex and then just use your keyboard arrow keys (up and down) 🤩

[@frederikkedahl4508]

Nice, thanks! cool feature :D

[@e69advitam]

​@@TimGabe Hi, pin this comment please)

[@MilanB]

When lazy, I use blobs plugin :D. Anyway, what are your thoughts on Spline, do you plan uploading content related to it?

[@TimGabe]

that’s a great hack, Milan! 🤩 I think Spline is a game changer when it comes to 3d, but haven’t had the time to dig my teeth into it… maybe in the future though! 🧐☺️

[@MilanB]

@@TimGabe I played with spline a bit. For sure it is not feature rich like blender but i think their aim is 3D for the web.It allows to export assets to react projects and interactions through code... Thanks for replying mate have a good weekend.

[@shivaniswaraj1857]

can you please provide the link to that jpg that was used in the optional step?please.thankyou

[@TimGabe]

oufff, so long ago since this tutorial was made 😢 can't find it!

[@Scott_C]

How would a developer build this?

[@khanayan-v7z]

Hey Tim, I couldn't find that noise image, can you please link it up?

[@khanayan-v7z]

Found it, thanks!

[@TimGabe]

great!!

[@tabmax22]

how do we get the css for this when we're actually coding the website?

[@TimGabe]

if you're not planning on having it animated you could just export it as a big .PNG and then compress it enough to not impact load times too much, but if you do want to animate it on a website you could either a) export the individual shapes as .SVGs and place them with position absolutes on your website or b) create divs on your website and use the inspect tool in Figma to map them as closely as possible (again, also using position absolutes) 🤩

[@vivlogs9752]

how do u clip the rectangle ? I didn't get it...

[@TimGabe]

Clip content (but it's only available on Frames 😃)

[@LearnWithBahman]

how do we code this ? or this is only possible in prototype

[@TimGabe]

you can create them in Framer, check this tutorial: kzbin.info/www/bejne/Y3-rnneYqMZogZI

[@thanveerkhan1353]

Is there any plugins for creating mesh gradients

[@TimGabe]

there are -- one is mentioned in the video!

[@daryleong988]

Hi, how do I get the PNG Image at 3:33? thank you

[@TimGabe]

you can search for "grain" in the Figma community and you'll find a bunch of free files including those kinds of grains!

[@daryleong988]

@@TimGabe thank you !

[@khanayan-v7z]

@@TimGabe Bro I can't find it, can you maybe link it?

[@tologonkudaiberdi2306]

then think about front end developers making it with code and how hard will be them ))

[@TimGabe]

a solution could be that you either make it an image or you try to stick to only circles 👌😃

[@tologonkudaiberdi2306]

@@TimGabe

[@honeypatel343]

HOW TO DO TARGET ??

[@TimGabe]

what kind of target are you referring to, my friend?

[@rixdomingo967]

I appreciate the tutorial but how can it be a for a beginner if everything is laid done and the follower literally has a blank canvas? :(

[@TimGabe]

i think midjourney.... can't remember!

[@Blumentalovic]

Great tutorial, but the one i did looks terrible.

[@TimGabe]

just keep playing around with different colors and you’ll find something that works 😃

[@jdanielortega]

Sadly you cant use it as a background inside of figma unless you export it.

[@TimGabe]

you mean as an image background in figma?

[@jdanielortega]

Yes, If I have an Auto Layout Frame, I can't use this as the background of let's say a section unless I export it as image. And then I would lose all editability@@TimGabe

[@JuaNSkter]

Great Tutorial, however, I would suggest doing things a bit slower. I'm just starting on Figma and your explanation was great, but you do things too quick, and I needed to scroll back over and over again.

[@TimGabe]

thanks for the feedback, Juan!! will keep this in mind 😃

[@UXMuskan]

@@TimGabe add time stamps so it will be easier for us thanks.

[@sadaffarsa6058]

Dope

[@TimGabe]

thanks Sadaff! 😃

[@ytRap007]

Amazing i need this.

[@TimGabe]

great to hear Ritche 🤩

[@tokyobizkit6844]

[@TimGabe]

🤩