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

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

Возникла проблема при загрузке этого видео. Это может быть связано с временными проблемами сети или видео может быть недоступно.

На главную

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

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

Anya Rossi• Live Now

Private livecam show

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

Фото профиля Daniel Destefanis

Daniel Destefanis1 год назад

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

Фото профиля Daniel Destefanis

Daniel Destefanis1 год назад

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 Figgi1 год назад

LFG 👏👏👏👏👏👏

Фото профиля brett goldstein

brett goldstein1 год назад

would be awesome as an API!

Фото профиля Howard Pinsky

Howard Pinsky1 год назад

This is beautiful!

Фото профиля Renata

Renata1 год назад

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

Фото профиля Daniel Destefanis

Daniel Destefanis1 год назад

Hell ya lmk if it does what you need

Фото профиля Joshua Guo

Joshua Guo1 год назад

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

Фото профиля Daniel Destefanis

Daniel Destefanis1 год назад

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

Фото профиля Asia Hoe

Asia Hoe1 год назад

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).

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!!

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

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

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

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

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 просмотров • 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. 💜

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

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 просмотров • 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! 👇

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 просмотров • 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.

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

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

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

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

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

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

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

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

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