Changelog

Clicking on shift while moving will constraint the movement to x/y axis, and clicking on shift while resizing maintain the original ratio.

New editor actions menu allows you to quickly navigate between the different views of a project, and perform actions such as saving, forking, and more!

The panels have been redesigned to be more ergonomic and intuitive, with larger resizers, collapsible headers, and more!

As a signed-in user, you can now change your name, add a bio, location, company, and even some links to your social media profiles!

You can now rename, duplicate, delete and create new gradients from the new actions bar! Fewer clicks, more productivity!

You can now view and download a project as a CSS file with percentage-based values (and not only pixel-based values). When using percentage-based values, the project becomes scalable!

New site-wide header with a clearer set of links and a new user menu

After a year of development, GradientArt has matured out of beta!

Fixed a bug that was causing the Transform tool to lose sync with the cursor when zoomed in/out

You can now comment on projects in their details page! Ask questions, share your feedback, and remember - be polite!

You can now download a project as an HTML file from the project's details page!

The new project details page now features an option to download the project as an image, with a few size options!

The project details page has been completely redesign to look more modern and ergonomic 😁

The page that you're visiting right now is the new place for getting the latest updates regarding GradientArt! Every new feature, improvement, bug fix or any other type of news will be tracked here, so come visit often!

You can now resize the width of the editor panels!

Undo/redo buttons have been added to the editor's toolbar. You can also use the keyboard shortcuts (Cmd/Ctrl + z, Cmd/Ctrl + Shift + z) to undo/redo your changes.

Based on user feedback, the move & resize tools have been combined to a single tool, called "Transform".

The whole site has been redesigned, and partly re-written using TailwindCSS!

Fixed a small issue with the gradient drag & drop that was causing it to flicker

You can now zoom in/out in the editor to see the little details of the design, or the bigger picture!

No more adding gradients with 2 duplicated color stops - from now own you can use a solid color instead!

We've added a new like button so you can show some love to your favorite designs.

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 now fork projects from others, modify them and save them to your account

You can now save your projects to your account! Each project gets a dedicated URL, so you can share it with the community and learn from others.We will pick the the best designs to be displayed in the "featured" section.

You can now pan the canvas (drag & move to view different parts of the canvas) and rotate gradients (where applicable - linear and conic gradients only).

Today we bought the "dient.art" domain, which will be used together with the "gra" subdomain to make "GradientArt" (we wanted to buy gradient.art but that was wayyy beyond our budget...)

You can now select conic and radial gradient types in the gradient properties panel.

You can now resize and move gradients in the canvas area.

We now have a basic gradient editor in place. You can add/remove gradient layers with color stops, and see your design in the canvas area.

Today we officially started developing GradientArt! We created a repo with a basic Next.js project, and connected it to Vercel.

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