Video yükleniyor...

Video Yüklenemedi

Bu video yüklenirken bir sorun oluştu. Bu geçici bir ağ sorunundan kaynaklanıyor olabilir veya video kullanılamıyor olabilir.

Ana Sayfaya Dön

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

103,093 görüntüleme • 1 yıl önce •via X (Twitter)

Eğitim Sanat Bilim & Teknoloji

Anya Rossi• Live Now

Private livecam show

10 Yorum

Daniel Destefanis profil fotoğrafı

Daniel Destefanis1 yıl önce

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

Daniel Destefanis profil fotoğrafı

Daniel Destefanis1 yıl önce

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 profil fotoğrafı

Miggi from Figgi1 yıl önce

LFG 👏👏👏👏👏👏

brett goldstein profil fotoğrafı

brett goldstein1 yıl önce

would be awesome as an API!

Howard Pinsky profil fotoğrafı

Howard Pinsky1 yıl önce

This is beautiful!

Renata profil fotoğrafı

Renata1 yıl önce

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

Daniel Destefanis profil fotoğrafı

Daniel Destefanis1 yıl önce

Hell ya lmk if it does what you need

Joshua Guo profil fotoğrafı

Joshua Guo1 yıl önce

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

Daniel Destefanis profil fotoğrafı

Daniel Destefanis1 yıl önce

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

Asia Hoe profil fotoğrafı

Asia Hoe1 yıl önce

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

Benzer Videolar

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 görüntüleme • 1 yıl önce

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 görüntüleme • 26 gün önce

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,817 görüntüleme • 2 ay önce

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 görüntüleme • 1 ay önce

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

534,071 görüntüleme • 22 gün önce

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 görüntüleme • 3 yıl önce

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 görüntüleme • 7 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 5 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 5 ay önce

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 görüntüleme • 4 ay önce

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 görüntüleme • 2 ay önce

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 görüntüleme • 1 yıl önce

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,749 görüntüleme • 4 ay önce

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 görüntüleme • 2 yıl önce

🚨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 görüntüleme • 1 yıl önce