Загрузка видео...

Не удалось загрузить видео

На главную

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__designs's profile picture

Daniel Destefanis

18,359 subscribers

103,132 просмотров • 2 лет назад •via X (Twitter)

ОбразованиеИскусствоНаука и технологии
LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 10

Фото профиля Daniel Destefanis
Daniel Destefanis2 лет назад

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

Фото профиля Daniel Destefanis
Daniel Destefanis2 лет назад

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 Figgi
Miggi from Figgi2 лет назад

LFG 👏👏👏👏👏👏

Фото профиля brett goldstein
brett goldstein2 лет назад

would be awesome as an API!

Фото профиля Howard Pinsky
Howard Pinsky2 лет назад

This is beautiful!

Фото профиля Renata
Renata2 лет назад

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

Фото профиля Daniel Destefanis
Daniel Destefanis2 лет назад

Hell ya lmk if it does what you need

Фото профиля Joshua Guo
Joshua Guo2 лет назад

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

Фото профиля Daniel Destefanis
Daniel Destefanis2 лет назад

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

Фото профиля Asia Hoe
Asia Hoe2 лет назад

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

Похожие видео

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).
0:56

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 просмотров • 1 год назад

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!!
0:30

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 просмотров • 2 месяцев назад

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!
1:17

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,059 просмотров • 4 месяцев назад

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 →
1:08

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

44,739 просмотров • 1 день назад

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; 🔖
3:19

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

49,815 просмотров • 4 дней назад

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.
0:35

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 просмотров • 2 месяцев назад

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.
0:20

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

18,305 просмотров • 17 дней назад

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.
0:31

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

545,055 просмотров • 2 месяцев назад

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!
0:32

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 просмотров • 3 лет назад

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. 💜
1:05

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 просмотров • 8 месяцев назад

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.
0:43

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,650 просмотров • 1 год назад

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! 👇
0:37

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,847 просмотров • 2 лет назад

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.
0:44

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 просмотров • 7 месяцев назад

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.
0:27

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,316 просмотров • 1 год назад

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🤯
1:18

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,790 просмотров • 6 месяцев назад

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
0:25

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 просмотров • 7 месяцев назад

📽️ My torture from Sunday, on the climb to Țibleș mountain. It's a beautiful, easy climb (max gradient around 7%) but I overheated and crawled on the 36x32 to reach the top LOL. I'm probably the worst rider ever in the heat. #MihaiRides #Tibles #Romania #DJI
1:08

📽️ My torture from Sunday, on the climb to Țibleș mountain. It's a beautiful, easy climb (max gradient around 7%) but I overheated and crawled on the 36x32 to reach the top LOL. I'm probably the worst rider ever in the heat. #MihaiRides #Tibles #Romania #DJI

Mihai Simion

10,436 просмотров • 1 день назад

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.
3:27

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 просмотров • 1 год назад