Gradient Art

About a month after I started working on it, I completed around 40 of my planned 80 tasks which I deemed MVP, and I released the first version of Gradient Art.

Currently, the editor supports many features, including transformations (scale/move/rotate), background stacking, full support for all 6 CSS gradient types, and an entire website with social login, and cloud storage.

Just finished implementing social login using https://next-auth.js.org/

The site currently supports signing in via GitHub and Facebook, and I plan to add support for Google and Twitter in the near future.

Using this library has been a great experience, and I highly recommend it!

The new landing page features canvas drawn animated orbs, isomorphic tiles of examples, and animated illustrations of the app's various features!

Originally, I thought about having the editor itself as the landing page, but then I decided that this site is going to be more than just an editor, so it deserves a nice home page.

You can see everything on the homepage of Gradient Art - https://gra.dient.art/

I came across this great article on CSS tricks about drawing with gradients - https://css-tricks.com/drawing-images-with-css-gradients/ and was intrigued immediately.

I later came across https://a.singlediv.com/ where I saw people create unbelievable illustrations using CSS gradients, and I saw the amazing potential behind this technique.

But designing such illustrations with just code is difficult and time-consuming, so I thought why not create a visual editor for it?

And that's how Gradient Art came to be :)