Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

I built a new mesh gradient tool that can create beautiful gradients from photographs. The results are often dreamlike and capture a general vibe. I'm calling it Photo Gradient, it's free on web and soon a Figma plugin, link below

Daniel Destefanis

18,702 subscribers

103,404 views • 2 years ago •via X (Twitter)

Education Arts Science & Technology

Anya Rossi• Live Now

Private livecam show

10 Comments

Daniel Destefanis2 years ago

Try it out at Still some bugs to fix and new features to add, a Figma plugin will come out shortly

Daniel Destefanis2 years ago

Starting to add some polish, included two new noise options, soon I’ll add more color points support and some more funky gradient options

Miggi from Figgi2 years ago

LFG 👏👏👏👏👏👏

brett goldstein2 years ago

would be awesome as an API!

Howard Pinsky2 years ago

This is beautiful!

Renata2 years ago

dude i was looking for something like this two days ago, you're a life saver

Daniel Destefanis2 years ago

Hell ya lmk if it does what you need

Joshua Guo2 years ago

Wow, dude! You keep creating these amazing tools and plugins, which save us tons of time.

Daniel Destefanis2 years ago

@JoshGuoDesign Thanks dude, I just love building stuff others get to use

Asia Hoe2 years ago

Thanks Daniel, can't wait to use this in Figma! I love using photos as a base for gradients.

Related Videos

Just published a new Figma plugin for creating mesh gradients from photographs. It's called Photo Gradient. It's completely free, available now on Figma Community or in your browser (links below).

Just published a new Figma plugin for creating mesh gradients from photographs. It's called Photo Gradient. It's completely free, available now on Figma Community or in your browser (links below).

Daniel Destefanis

73,103 views • 1 year ago

Finally after years background gradient problem solved! A powerful editor with a bunch of beautiful premade mesh gradients that can be visually 🫡 customized and exported as images or even animated videos 😭 Web: It's too good for hero section bg!!

Finally after years background gradient problem solved! A powerful editor with a bunch of beautiful premade mesh gradients that can be visually 🫡 customized and exported as images or even animated videos 😭 Web: It's too good for hero section bg!!

Athrix ☄️

10,509 views • 4 months ago

We outgrew static gradients. So we rebuilt everything. Grainient V2 is live. What started as a gradient library is now something else entirely: • Animated gradient videos • Real-time gradient shader tool • Textured, mesh, and AI-crafted backgrounds From downloading assets → to actually create and control them. So, Designers. Here is the Grainient v2 for you!

We outgrew static gradients. So we rebuilt everything. Grainient V2 is live. What started as a gradient library is now something else entirely: • Animated gradient videos • Real-time gradient shader tool • Textured, mesh, and AI-crafted backgrounds From downloading assets → to actually create and control them. So, Designers. Here is the Grainient v2 for you!

Basit A. Khan

129,482 views • 6 months ago

I just found a free gradient builder! It has tons of styles like mesh, grainy, aurora, waves, animated gradients, pixel & more. You can export as SVG, PNG, or MP4, or paste it directly into Figma as editable layers. Check it out →

I just found a free gradient builder! It has tons of styles like mesh, grainy, aurora, waves, animated gradients, pixel & more. You can export as SVG, PNG, or MP4, or paste it directly into Figma as editable layers. Check it out →

Nero

53,262 views • 2 months ago

The SVG mesh gradient generator is live! 🚀 • SVG exports • Grainy texture • Fully editable colors • Save gradients • Custom dimensions Link below

The SVG mesh gradient generator is live! 🚀 • SVG exports • Grainy texture • Fully editable colors • Save gradients • Custom dimensions Link below

Jim Raptis

126,717 views • 3 years ago

Found a free gradient builder that is actually useful. - Soft painterly gradients from a Japanese colour palette - 20 plus types, mesh, grainy, aurora, waves, pixel and more - Live preview while you blend colours - Export SVG, PNG or MP4 - Paste SVG into Figma as named editable layers - No signup, no watermark link; 🔖

Found a free gradient builder that is actually useful. - Soft painterly gradients from a Japanese colour palette - 20 plus types, mesh, grainy, aurora, waves, pixel and more - Live preview while you blend colours - Export SVG, PNG or MP4 - Paste SVG into Figma as named editable layers - No signup, no watermark link; 🔖

Manish Kumar

52,429 views • 2 months ago

I’ve always wanted to be able to quickly generate gradients from color palettes, so I built Tintly, a macOS tool for creating mesh gradients. It accepts palettes in any format and instantly converts them into beautiful gradients.

I’ve always wanted to be able to quickly generate gradients from color palettes, so I built Tintly, a macOS tool for creating mesh gradients. It accepts palettes in any format and instantly converts them into beautiful gradients.

Natalia Panferova

20,531 views • 4 months ago

Introducing Better Gradient, a collaboration between Plugin Play and Ravie "The Gradient Guys" .co Now available at - Save gradient presets - Customize your color interpolation with graph easing - Significantly improved color rendering to get rid of the gross grays AE typically produces between color stops. - Animate gradients along paths with shadows - and so much more! Effortlessly blend colors into mesmerizing kaleidoscopes of gradient joy. Mapping, paths, you name it, you can gradient it. Launch video direction, design, and animation from Sam Essanoussi and Justin De Leon.

Introducing Better Gradient, a collaboration between Plugin Play and Ravie "The Gradient Guys" .co Now available at - Save gradient presets - Customize your color interpolation with graph easing - Significantly improved color rendering to get rid of the gross grays AE typically produces between color stops. - Animate gradients along paths with shadows - and so much more! Effortlessly blend colors into mesmerizing kaleidoscopes of gradient joy. Mapping, paths, you name it, you can gradient it. Launch video direction, design, and animation from Sam Essanoussi and Justin De Leon.

Austin Bauwens

19,090 views • 2 months ago

I don't care what any ai doomer has to say... From Cinema4d MCP to Figma to a Opus 5.5 built gradient tool to a live fucking Shopify Theme... it's actually the greatest time to be a designer

I don't care what any ai doomer has to say... From Cinema4d MCP to Figma to a Opus 5.5 built gradient tool to a live fucking Shopify Theme... it's actually the greatest time to be a designer

Stefano

27,921 views • 1 month ago

Paper Shaders: now fully open source and FREE Yes, you can make a: plugin, tool, template, site, app, library. Resell it. Make a Figma plugin. It's already code. Go for it! We're pushing shaders forward. New Paper Shaders on the way.

Paper Shaders: now fully open source and FREE Yes, you can make a: plugin, tool, template, site, app, library. Resell it. Make a Figma plugin. It's already code. Go for it! We're pushing shaders forward. New Paper Shaders on the way.

Stephen Haney

552,116 views • 4 months ago

Working on improving the pathing module and implementing some tooling for it. The new gradient fill tool lets you easily generate gradient maps.

Working on improving the pathing module and implementing some tooling for it. The new gradient fill tool lets you easily generate gradient maps.

poiyomi

12,308 views • 1 year ago

I'm really excited about our new Figma feature, variables. So, I built a new plugin I call "Find Variables" to help you find where they're being used across your design. It will be free and open source once it's published to Figma community!

I'm really excited about our new Figma feature, variables. So, I built a new plugin I call "Find Variables" to help you find where they're being used across your design. It will be free and open source once it's published to Figma community!

Daniel Destefanis

75,900 views • 3 years ago

Quick tip for my graphic designers, In Ps, drop in your photo. Filter ➔ Camera Raw Filter. (Color) -100 Saturation. (Effects) Clarity +40, Texture +55. Gradient map— choose a color. Click the gradient layer mask. Select, Color Range, and click around. Gradient Mesh.

Quick tip for my graphic designers, In Ps, drop in your photo. Filter ➔ Camera Raw Filter. (Color) -100 Saturation. (Effects) Clarity +40, Texture +55. Gradient map— choose a color. Click the gradient layer mask. Select, Color Range, and click around. Gradient Mesh.

Seso

182,203 views • 2 years ago

I've added a function to propagate a gradient across the mesh (it follows the curvature of the hair), and then copy that gradient to the Windows clipboard as a transparent picture, for use as a selection mask in the image editor

I've added a function to propagate a gradient across the mesh (it follows the curvature of the hair), and then copy that gradient to the Windows clipboard as a transparent picture, for use as a selection mask in the image editor

Haï~

13,311 views • 1 year ago

Implemented a lot of new features to my color palette tool. Gradient mixer, to mix two gradient together to create a palette. I'm excited. Now also supports loading in image and extract colors. Images with indexed colors support. Color analysis with real-time filters.

Implemented a lot of new features to my color palette tool. Gradient mixer, to mix two gradient together to create a palette. I'm excited. Now also supports loading in image and extract colors. Images with indexed colors support. Color analysis with real-time filters.

Philipp "Soma" Urlich

93,313 views • 11 months ago

Photo to gradient. Save this website for later (link below)

Photo to gradient. Save this website for later (link below)

Kailash

70,845 views • 10 months ago

custom tools on demand mesh gradient editor built and running right in claude. took maybe 30 minutes

custom tools on demand mesh gradient editor built and running right in claude. took maybe 30 minutes

Aaron Ng

51,909 views • 2 years ago

UI/UX Designers, you can now create unlimited animated gradient videos without paying a single cent. I just found this website called Krumzi, a simple but powerful animated background generator that lets you create smooth, eye-catching gradient videos for free. Perfect for landing pages and hero sections. Can’t believe it’s free; bookmark it for later. 💜

UI/UX Designers, you can now create unlimited animated gradient videos without paying a single cent. I just found this website called Krumzi, a simple but powerful animated background generator that lets you create smooth, eye-catching gradient videos for free. Perfect for landing pages and hero sections. Can’t believe it’s free; bookmark it for later. 💜

Abraham John 🦄🦓

40,843 views • 10 months ago

Created liquid metal effect using CSS and JS from our Figma tutorial. 7 layers of radial gradient with "difference" blend mode. Animated with framer-motion by changing gradient spread and rotation of a base layer. Reply in the comments or DM to get a link to the code.

Created liquid metal effect using CSS and JS from our Figma tutorial. 7 layers of radial gradient with "difference" blend mode. Animated with framer-motion by changing gradient spread and rotation of a base layer. Reply in the comments or DM to get a link to the code.

Alex Barashkov

34,727 views • 2 years ago