ShaderGradient is a design tool to create beautiful moving gradients. Make stunning visuals by adding natural movements and effects to the gradient. It's available on your favorite tools, like Framer, Figma, and React.
Hi PH community 👋!
Ruucm and Seungmee here, and we’re so excited to share ShaderGradient, a tool to create beautiful moving gradients for designers and developers!
We launched our first Framer component in January 2023, and it has been a joy to see how people are using it for their designs in creative ways! With our official launch today, we’re sharing the complete suite of Framer, Figma, and React Component, and hoping to see more stunning works with ShaderGradient 😄
🎨 **Why we made ShaderGradient**
This project started with pure curiosity - Ruucm, a developer, and I, a designer, both had an interest in designing a new way to create a gradient.
In our initial discussions, we’ve talked about why gradient remains a center of design trends and is loved by everyone. We concluded that gradient is a way to augment natural lights and colors we encounter everywhere - a shadow from the window, hues of the sky that change by the time of the day, or the season of the year, and shimmers on waves.
That’s where we started to explore how to unleash the spectrum of visual expression - by using ‘shaders’. We hope our tool can help everyone's creative visual explorations 🤩
⚡️ **What makes ShaderGradient special**
- **Unleash the boundary of visual expressions:** What you’re seeing as a gradient is part of a moving 3D object. Create stunning visuals by changing colors, shapes, movements, and effects like grain and reflections.
- **Available on your favorite tools:** We’re on Framer, Figma, and React! Check links on the Product Hunt page or our website!
- **Easiest way to create 3D interactions:** With Framer and React components, you can take one step forward and build interesting 'interactions'!
🚀 **What’s next?**
Performance optimization, UX improvements, and more interesting shaders! Stay tuned, and let us know if there’s something you’re expecting from us! 😉
💌 **Let us know what you think!**
When we started this project, we had no idea that we’d build a tool and launch it on Product Hunt. We could push it through thanks to all the interests and amazing works that the community has shared with us.
We would love to hear your thoughts on how to polish our product and take it to the next level! Please feel free to share any feedback, questions, and suggestions by leaving a comment here, or via [Twitter](https://twitter.com/shadergradient) and [Instagram](https://instagram.com/shadergrad...)
And if you made something with ShaderGradient, share it with us on Twitter! Your works will become an inspiration for others 😉
@seungmee_lee massive congrats on the launch, big fan of your work! I wanna set a shader as my desktop bg 😍 can't believe it's for react too, gonna give that a go
Slick! beautiful stuff guys, I love the origin of the project, it really shows you put a lot of creativity into this. The react component is such a nice addition as well, can't wait to see more!
@mac_czaj ah Figma is the most popular design tool, and Framer is quite powerful and code-friendly. you can make a direct website with this gradient in Framer.
Shadergradient 1.0