Changelog

Add a new layer now opens a type menu with square previews. Choose Gradient, Solid color, Noise, Pattern, Shape, Texture or Text, or dismiss the menu without changing your project. Gradient layers start as Linear; choose Linear, Radial or Conic in Properties. Other layer types stay fixed after creation. Switching gradient types preserves color stops, repetition and shared settings, while discarding inactive settings and bindings. New layers store only their own settings, and older projects shed inactive settings when loaded or saved without changing their appearance. Duplication, deletion and undo/redo still work for every type.

Code is now a complete HTML document for every project, including designs made only from CSS gradients. The editor, project details and homepage share the same output as Download HTML, with consistent two-space indentation and a #root container. Noise, Pattern, Shape, Texture and Text render as inline SVG rather than encoded background-image URLs, with unique filter and pattern IDs across layers and previews. Position, size, repetition, stacking and live CSS variables remain supported in pixel and percentage exports. Google Fonts imports remain in the document stylesheet; fonts require a connection. Image downloads still use the screenshot service.

Search inside the Font dropdown for the complete Google-font catalog provided by Fontsource and choose each family's available weights and styles. Text uses inline SVG with Google Fonts; the exported HTML stylesheet starts with a deduplicated @import instead of embedding font files. Copy the document shown in Code, or download HTML. Font loading requires an internet connection; project text is not sent to Google Fonts or Fontsource. Older saved font snapshots become lightweight family references on load and save, using Google's currently served font versions rather than preserving historical font bytes. Unavailable glyphs or failed font requests can use fallback fonts, and complex-script shaping can vary across browsers. Preview reports font-loading failures. Text outside layer bounds is clipped. Image downloads still use the screenshot service.

Layer types, patterns, shapes and texture presets now show square previews to the left of each option and the selected value. Dropdowns keep their keyboard navigation and readable text labels.

Choose these types from Add a new layer. Patterns include dots, stripes, grids and checkerboards with transparent colors. Shapes include rectangles, ellipses, polygons, stars and bounded custom SVG paths. Textures include paper grain, clouds, marble veins and wood rings; filters affect only their own layer. All four use the existing layer controls, history and saved projects, and share inline SVG across previews and HTML exports. Text loads Google Fonts through the document stylesheet. Rotated patterns repeat seamlessly within their SVG, but repeating a finite layer can show seams unless its boundaries match the pattern. Large or rotated shapes and text are clipped at the layer edges. Image downloads continue to use the screenshot service.

Noise layers now support Color, Monochrome, and Tint modes. Choose Tint to apply a custom color, adjust contrast from 0 to 4 (1 keeps the original contrast), and use opacity from 0 to 1 to blend the texture with layers below. These settings are saved with your project and included in CSS and HTML exports. Existing noise layers keep their original appearance.

Choose Noise from Add a new layer to create an SVG texture. Choose Fractal noise or Turbulence, then adjust frequency, octaves, and seed. Move, resize, repeat, and stack noise alongside gradients. Noise settings are saved with your project, and CSS and HTML exports embed the SVG directly without an external image.

Variables now use just Number, Color, and Function. Numbers and functions can bind to any numeric input when their current value fits its range; the input supplies pixels, degrees, or percent. Changes that would invalidate a bound input are rejected. Existing numeric variables keep their values, constraints, and references.

Create Function variables or choose Formula from a numeric input's variable menu to calculate values directly, without naming a variable. Use existing numeric variables, numbers, parentheses, and +, -, * or /. Formulas share validation for missing references, circular dependencies, division by zero, and invalid results. Input formulas use the input's units and range, update with their dependencies, and remain live in CSS and HTML exports. Choose Formula again to edit, or Static value to remove it.

Find projects with exposed variables in the new Templates section of Explore. Browse the newest customizable designs and adjust their controls without changing the original project.

Use the eyedropper beside Done in the color picker to sample a screen color in supported browsers. Your current opacity is preserved, and cancelling leaves the color unchanged.

Create colors, lengths, percentages, angles, and numbers in the editor Variables panel. Edit definitions in a dialog, or change defaults directly in compact variable rows. New CSS names come from the label. Use the variable icon beside an input's unit or color to select a compatible variable; bound inputs show its name. Edit defaults to update every binding at once. Variable types stay fixed, and unbinding or deleting restores each input's static value. Canvas edits replace bindings on the edited properties. Projects with exposed variables have a Customizable badge, and viewers can customize and reset a local preview without changing your saved design. CSS and HTML exports include reusable custom properties; numeric properties are unitless and gain their units at each use.

GradientArt now runs on React 19, following the migration to Jotai and our locally maintained editor components. The editor keeps its familiar appearance and workflow.

The editor now uses a local, React 19-compatible copy of the Webrix components it needs instead of the unmaintained package. Dragging, resizing, scrolling, and popovers keep their familiar behavior, while we can maintain and improve their implementation directly.

Dragging gradient stops past each other no longer leaves the preview showing old colors. Midpoint hints stay editable but only affect the gradient when directly between two color stops, keeping the slider, canvas, and exported CSS in sync.

Undo and redo now track changes to your design, with one step per drag or completed text edit. Zoom, pan, selection, tool changes, and save/update actions no longer clutter the history. Saving keeps your editing history intact.

We have replaced Recoil with Jotai and jotai-family, keeping the familiar editor while separating document history from temporary interface state.

Dragging the Repeat control now updates the selected gradient, even when switching between gradients with the same repeat value. The fix also applies to other draggable numeric controls in the editor.

We have upgraded the frameworks and libraries behind GradientArt, including Next.js, authentication, drag-and-drop, color conversion, icons, and documentation rendering. The site now uses Tailwind CSS 4 and CSS Modules, while keeping its familiar look and editing workflow. Please use Safari 16.4+, Chrome 111+, or Firefox 128+.

Fixed an authentication callback error that could prevent signing in with GitHub.

Reordering gradient layers with the keyboard no longer accidentally nudges the selected gradient on the canvas. Arrow keys also leave the canvas unchanged while you are working with form controls.

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