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,137 subscribers

102,982 views • 1 year ago •via X (Twitter)

Education Arts Science & Technology

Anya Rossi• Live Now

Private livecam show

10 Comments

Daniel Destefanis1 year ago

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

Daniel Destefanis1 year 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 Figgi1 year ago

LFG 👏👏👏👏👏👏

brett goldstein1 year ago

would be awesome as an API!

Howard Pinsky1 year ago

This is beautiful!

Renata1 year ago

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

Daniel Destefanis1 year ago

Hell ya lmk if it does what you need

Joshua Guo1 year ago

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

Daniel Destefanis1 year ago

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

Asia Hoe1 year 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 • 21 days 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

127,709 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 • 28 days 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

531,839 views • 18 days 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

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,240 views • 6 months ago

I vibe-v0⁠d a tool to replace a slower Figma workflow: creating a magnifying glass effect for my X screenshots. The entire image editor, draggable 🔍, resizable artboard, tooltip controls, copying / downloading logic, etc was prompted. Even the colors and gradient combinations were dreamt up by the LLM.

I vibe-v0⁠d a tool to replace a slower Figma workflow: creating a magnifying glass effect for my X screenshots. The entire image editor, draggable 🔍, resizable artboard, tooltip controls, copying / downloading logic, etc was prompted. Even the colors and gradient combinations were dreamt up by the LLM.

Guillermo Rauch

74,533 views • 1 year ago

CSS Trick! 🤙 You can create gradient borders on translucent elements using mask-clip and mask-composite with a pseudo-element 🔥 .gradient-border::after { mask-clip: padding-box, border-box; mask-composite: intersect; mask: linear-gradient(transparent, transparent), linear-gradient(white, white); } It's the same "Transparent border trick" from before. But, now you apply it to a pseudo-element 😎 The trick is to create a pseudo-element with a gradient background and then mask it so we only see the part we want, the border ✨ mask-clip defines the area affected by a mask. Similar to how you can define background-size. Using padding-box and border-box constrains the two masks. mask-composite is the magic part ✨ It defines a compositing operation for stacked mask layers. Using intersect means that the parts that overlap get replaced. And this seems to work in all browsers 🙌 As for the rest of the styles... – Make sure you set pointer-events: none on the pseudo-element – Make sure it fills the parent element. You can use position: absolute and inset: 0 – Make sure the background fills the space including the border-width. You can use calc to achieve that: --bg-size: calc(100% + (2px * var(--border))); background: var(--gradient) center center / var(--bg-size) var(--bg-size); That's it! 🚀 Gradient borders on translucent elements. You can set all the backdrop-filter: blur() you like! 😅 CodePen.IO link below! 👇

CSS Trick! 🤙 You can create gradient borders on translucent elements using mask-clip and mask-composite with a pseudo-element 🔥 .gradient-border::after { mask-clip: padding-box, border-box; mask-composite: intersect; mask: linear-gradient(transparent, transparent), linear-gradient(white, white); } It's the same "Transparent border trick" from before. But, now you apply it to a pseudo-element 😎 The trick is to create a pseudo-element with a gradient background and then mask it so we only see the part we want, the border ✨ mask-clip defines the area affected by a mask. Similar to how you can define background-size. Using padding-box and border-box constrains the two masks. mask-composite is the magic part ✨ It defines a compositing operation for stacked mask layers. Using intersect means that the parts that overlap get replaced. And this seems to work in all browsers 🙌 As for the rest of the styles... – Make sure you set pointer-events: none on the pseudo-element – Make sure it fills the parent element. You can use position: absolute and inset: 0 – Make sure the background fills the space including the border-width. You can use calc to achieve that: --bg-size: calc(100% + (2px * var(--border))); background: var(--gradient) center center / var(--bg-size) var(--bg-size); That's it! 🚀 Gradient borders on translucent elements. You can set all the backdrop-filter: blur() you like! 😅 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

269,739 views • 2 years ago

Working on a tool to generate low poly collision meshes from gaussian splats. It uses marching cubes and quadric error metric (QEM) decimation. Results are pretty good, it can get a usable sub 10Mb collision mesh from a 50Mb splat.

Working on a tool to generate low poly collision meshes from gaussian splats. It uses marching cubes and quadric error metric (QEM) decimation. Results are pretty good, it can get a usable sub 10Mb collision mesh from a 50Mb splat.

martin_casado

49,759 views • 5 months ago

i really enjoy 3Blue1Brown's math animations. so i built a tool that converts natural language into math animations using the manim engine and gpt-4o. now you can create your own math animations! give it a try using the link below.

i really enjoy 3Blue1Brown's math animations. so i built a tool that converts natural language into math animations using the manim engine and gpt-4o. now you can create your own math animations! give it a try using the link below.

Archie Sengupta

370,174 views • 1 year ago

built something really cool 👀 it's called OpenUsage and it's: - super fast - super clean - super open ... because it's plugin-based, so when a plugin breaks, people can just update it without waiting for a new version of the app! link in comment

built something really cool 👀 it's called OpenUsage and it's: - super fast - super clean - super open ... because it's plugin-based, so when a plugin breaks, people can just update it without waiting for a new version of the app! link in comment

Robin Ebers | AI Coach for Founders

76,410 views • 5 months ago

we all know LLMs love markdown i have built a tool that lets you convert any web page to markdown npm i web-to-markdown i ran some benchmarks and the results are shocking at how many tokens you can save🤯

we all know LLMs love markdown i have built a tool that lets you convert any web page to markdown npm i web-to-markdown i ran some benchmarks and the results are shocking at how many tokens you can save🤯

Nidhi Singh

30,741 views • 4 months ago

If you are a designer using Figma STOP scrolling. We built a Figma plugin for you that'll help you generate and edit dope images without ever leaving Figma. Want it? reply "FIGMA" PS - We're giving it away for free to the first 500 people to sign up.

If you are a designer using Figma STOP scrolling. We built a Figma plugin for you that'll help you generate and edit dope images without ever leaving Figma. Want it? reply "FIGMA" PS - We're giving it away for free to the first 500 people to sign up.

Pete Sena

15,354 views • 1 year ago

Releasing a few quality of life Figma Draw updates today → New brush & texture updates (gradients, eyedropper, and noise controls) → Dedicated text on a path tool (or drag on an empty canvas to create text on a circle) → Separate text and vector into independent layers Plus, we pulled a few features over from Design to make it easier to access → New layers panel icons → Auto layout directly in Draw

Releasing a few quality of life Figma Draw updates today → New brush & texture updates (gradients, eyedropper, and noise controls) → Dedicated text on a path tool (or drag on an empty canvas to create text on a circle) → Separate text and vector into independent layers Plus, we pulled a few features over from Design to make it easier to access → New layers panel icons → Auto layout directly in Draw

Figma

62,844 views • 2 months ago

I recorded a 18-min tutorial on The New Google Stitch - Better than Figma (And It's Free)

I recorded a 18-min tutorial on The New Google Stitch - Better than Figma (And It's Free)

Viktor Oddy

252,597 views • 4 months ago

CSS Trick! ⭐️ You can animate your gradient borders by defining types for your custom properties with @ property 🔥 1. Define a property @ property --angle { syntax: ' '; /* 👈 type angle*/ inherits: true; initial-value: 0deg; } 2. Animate the value article { animation: rotate 2s infinite linear paused; } @ keyframes rotate { to { --angle: 360deg; } } 3. Use the value in your conic-gradient background. article { --gradient: conic-gradient(from var(--angle), ...); background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--gradient) border-box; border: 4px solid transparent; } 4. Change the play state to running on :hover, etc. article:is(:hover, :focus-within) { animation-play-state: running; } That's it! 🤙 As soon as Firefox 120 lands, this one will work in all browsers! 🙌 Until then, it's a progressive enhancement. You will still get the brightening of the border on hover, etc. That's handled with a pseudo-element ✨ CodePen.IO link below! 👇

CSS Trick! ⭐️ You can animate your gradient borders by defining types for your custom properties with @ property 🔥 1. Define a property @ property --angle { syntax: ' '; /* 👈 type angle*/ inherits: true; initial-value: 0deg; } 2. Animate the value article { animation: rotate 2s infinite linear paused; } @ keyframes rotate { to { --angle: 360deg; } } 3. Use the value in your conic-gradient background. article { --gradient: conic-gradient(from var(--angle), ...); background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--gradient) border-box; border: 4px solid transparent; } 4. Change the play state to running on :hover, etc. article:is(:hover, :focus-within) { animation-play-state: running; } That's it! 🤙 As soon as Firefox 120 lands, this one will work in all browsers! 🙌 Until then, it's a progressive enhancement. You will still get the brightening of the border on hover, etc. That's handled with a pseudo-element ✨ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

258,704 views • 2 years ago

🚨BREAKING: You can now build full websites by just typing. It’s called Youware, and it runs on pure vibe coding. Here’s how it works (with a live demo):👇 1. Create a web page or game just by typing. You can even send a screenshot to make it live. 2. Use built-in tools like Figma, YouTube, and Notion. 3. Change a Figma design into a real website. 4. Change how the webpage looks with one click using the boost button on the profile page. 5. Easily deploy code with a link you can share. 6. Highlights: free online AI coding. Try it today:

Hasan Toor

73,516 views • 1 year ago