grabient.com
Grab a gradient!
This is a rewrite of one of the first ever web apps I put out there over 8 years ago š“ (view the source code at your own peril). It uses an formula by Inigo Quilez to generate palettes / gradients.
If you're a digital artist or just a fan of gradients - check it out!
demo video
Stack:
Tanstack Start
Clerk
Tailwind v4/Shadcn UI
Convex š„°
Cron job component used to run a mutation every 15 minutes to update the 'popular' table with liked palettes
Aggregate component for likes
Grabient
Beautiful and simple UI for generating web gradients.
Inigo Quilez
Articles on computer graphics, math and art
Grabient | Cosine Gradient Generator & Palette Finder
Use Grabient, a cosine gradient generator, to create custom CSS gradients and discover inspiring color palettes. Perfect for designers and developers.
8 Replies
Hi, @korz
Thanks to Claude one shotting a grabient descent algorithm for me š¤Æ. here's some convex seeeds:
https://grabient.com/HQdgbAHANMDMECYYIJwEYazWTqbYAYYQQNQDZiCAWKNYagkTa6YFFAoA?angle=90&style=linearSwatches&steps=3
https://grabient.com/HQdgbCA0wMztAmEAORBON0ZgIyIWNCAKwJEAs5kOwOYADNOTpjTDMdbTskA?steps=3&style=linearSwatches&angle=45
https://grabient.com/HQdgrAHANMDMLWAJhAThksIawCyIEZV1gA2NGEJEtdA4XEABh1nQFongmIwg?style=linearGradient&angle=135&steps=5
need to figure out how to do dynamic OG images š¤
ā
done. ez with http actions
biig update for the project. Did a complete redesign. So far we've got 235 signed up users
Worldwide love for Grabient ā¤ļø
update!! We are nearing 1000 signed up users with over 30k MAU!
Features added for the Convex/Resend hackathon:
šØ New Grabient style - Deep Flow WebGL based gradient
š¬ Clipping and exporting (png, svg, webm)
āļø Contact form powered by Resend
Give Grabient an update: https://vibeapps.dev/s/grabient
Grabient.com
Check out this Grabient!
Vibe Apps
The place to share and discover new apps.
