Feat(UI): Add linear and radial gradient tools to canvas by DustyShoe · Pull Request #8774 · invoke-ai/InvokeAI

DustyShoe · 2026-01-18T18:12:27Z

Summary

This PR adds a set of radial and linear gradients to available toolset on canvas.
Adds parent and child custom buttons.
Tool respects color transparency and both color swatches. It draws gradient in direction of mouse movement: from active color to inactive. Gradient is rasterized on mouse release on current active layer.
It is also possible to activate clipping by drag start-stop points.
Gradient is clipped by bbox to save on performance.

2026-01-18.16-30-16.mp4

Related Issues / Discussions

QA Instructions

Verify buttons display is correct.
Verify gradient direction follows mouse movement from active color to inactive color.
Change both color swatches and confirm both are used in the gradient.
Set opacity on one or both colors and verify transparency is respected.
Draw gradients of different sizes and confirm rendering is clipped to the bounding box.
Activate "Clip Gradient" and verify clip by start-end points is applied.
Use Undo/Redo and verify each gradient application is a single history step.

Merge Plan

PR merge should be painless. Though, code might need a proper check.

Checklist

The PR has a short but descriptive title, suitable for a changelog
Tests added / updated (if applicable)
❗Changes to a redux slice have a corresponding migration
Documentation added / updated (if applicable)
Updated What's New copy (if doing a release after this PR)

DustyShoe · 2026-01-19T21:35:30Z

Also would like an advise on what icon should "Gradient Clip" button have.
Right now it uses "Crop" icon:

lstein · 2026-01-20T20:44:56Z

@dunkeroni Could you take primary reviewer on this one?

dunkeroni

This is a useful tool. Operating it is a bit clunky, but mostly because interacting with both colors on our color-picker is tedious right now.

Performance-wise it seems pretty good on my system; drawing is done on the user end and committed on release. Drawing many gradients quickly will slow down the UI a lot, but that is a limitation of the rasterization/update of the layer on the server, not a flaw that this PR can solve.

invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolGradientButton.tsx

invokeai/frontend/web/src/features/controlLayers/konva/CanvasObject/CanvasObjectGradient.ts

invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool/CanvasGradientToolModule.ts

…bject/CanvasObjectGradient.ts Co-authored-by: dunkeroni <dunkeroni@gmail.com>

…ol/ToolGradientButton.tsx Co-authored-by: dunkeroni <dunkeroni@gmail.com>

…opover mode buttons and group clip+mode cluster

dunkeroni · 2026-02-02T23:50:53Z

I was having some inconsistencies getting the mode popover to show when I wanted it. Instead I've moved them up to the top left next to the clip toggle, so they're always visible.

Can you add me as a collaborator to your fork so that I can push commits here? Something about how git handles permissions when the repos have been touched by LFS makes it impossible for me right now.

DustyShoe · 2026-02-03T05:29:39Z

Instead I've moved them up to the top left next to the clip toggle, so they're always visible.

That was my initial idea, but it was suggested to use popover instead in https://discord.com/channels/1020123559063990373/1457030215686422569. So i thought i'd reuse this suggestion here.

Can you add me as a collaborator to your fork so that I can push commits here?

I couldn't figure out how to do that. Some searches claim that you can not do that.

DustyShoe · 2026-02-03T06:21:59Z

TBH I like the child set of icons and will investigate the issue with inconsistent rendering.
If i won't figure it out we'll get back to top positioned buttons.

dunkeroni · 2026-02-03T16:44:32Z

Having settings at the top makes it consistent with the current brush tools, and would be a good pattern to follow with future tools as well. It doesn't obstruct the canvas view at all either.

DustyShoe · 2026-02-03T16:55:43Z

Having settings at the top makes it consistent with the current brush tools, and would be a good pattern to follow with future tools as well. It doesn't obstruct the canvas view at all either.

Cool! Let's keep it in top bar then. Can you push your change now or it is still blocking?

dunkeroni · 2026-02-03T17:28:13Z

No, you'd have to go to the settings on your own fork and send me an invite to be a collaborator.

Otherwise, if you just want to merge them into this branch yourself, I pushed the edits to my own fork at https://github.com/dunkeroni/InvokeAI/tree/Feat(UI)/Canvas/Add_gradient_tool

dunkeroni

Works as expected and adds an otherwise difficult to achieve effect. UI impact is minimal, and the structure can easily extend for new behaviors in the future if someone wants to add.

Merged upstream features: - Gradient tools (invoke-ai#8774) - Paged gallery view (invoke-ai#8772) - Encoder CPU toggle (invoke-ai#8777) - Various bug fixes Removed downstream pagination implementation in favor of upstream: - Deleted PaginatedGrid.tsx - Deleted GalleryModeCombobox.tsx - Deleted PageSizeCombobox.tsx - Removed galleryMode, paginationPageSize, currentPage from gallery state - Updated GallerySettingsPopover to use upstream's UsePagedGalleryViewCheckbox Kept downstream features: - LoRA category system - Folder hierarchy (recursiveFolderView) - Layout mode Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Adding gradient tool to canvas. Lineara and radial.

878cb33

github-actions bot added the frontend PRs that change frontend files label Jan 18, 2026

DustyShoe added 4 commits January 18, 2026 20:16

Formatting again...

40a2cc8

Formatting again 2...

b66cf61

Minor bug fix

61f0381

Some button design tweaking

11caa0d

lstein assigned dunkeroni Jan 20, 2026

Merge branch 'main' into Feat(UI)/Canvas/Add_gradient_tool

6c3251b

DustyShoe marked this pull request as ready for review January 21, 2026 15:48

DustyShoe requested review from Pfannkuchensack, blessedcoolant, dunkeroni and lstein as code owners January 21, 2026 15:48

Fixed icorrect wording where Circular was used instead of Radial.

2bf0fe9

dunkeroni requested changes Jan 26, 2026

View reviewed changes

DustyShoe and others added 7 commits January 26, 2026 08:29

Update invokeai/frontend/web/src/features/controlLayers/konva/CanvasO…

236cd12

…bject/CanvasObjectGradient.ts Co-authored-by: dunkeroni <dunkeroni@gmail.com>

Update invokeai/frontend/web/src/features/controlLayers/components/To…

ebba9b6

…ol/ToolGradientButton.tsx Co-authored-by: dunkeroni <dunkeroni@gmail.com>

Update invokeai/frontend/web/src/features/controlLayers/components/To…

95def55

…ol/ToolGradientButton.tsx Co-authored-by: dunkeroni <dunkeroni@gmail.com>

Update invokeai/frontend/web/src/features/controlLayers/components/To…

63f3218

…ol/ToolGradientButton.tsx Co-authored-by: dunkeroni <dunkeroni@gmail.com>

Autocommit fix on mouse leaving canvas area

6fcbd25

Merge branch 'main' into Feat(UI)/Canvas/Add_gradient_tool

e035155

Merge branch 'main' into Feat(UI)/Canvas/Add_gradient_tool

7cdde45

lstein added the v6.12.0 Intended for 6.12.0 release label Jan 29, 2026

lstein moved this to 6.12.x in Invoke - Community Roadmap Jan 30, 2026

lstein added this to Invoke - Community Roadmap Jan 30, 2026

dunkeroni added 4 commits February 2, 2026 16:26

Merge branch 'main' into Feat(UI)/Canvas/Add_gradient_tool

2d6dc80

feature(canvas): move gradient mode controls to top toolbar; remove p…

829c294

…opover mode buttons and group clip+mode cluster

(chore) prettier

4df2f92

remove fixed icon size

46481f1

dunkeroni approved these changes Feb 3, 2026

View reviewed changes

Merge branch 'main' into Feat(UI)/Canvas/Add_gradient_tool

fc8a3ef

lstein enabled auto-merge (squash) February 3, 2026 20:18

lstein merged commit b7d7cd0 into invoke-ai:main Feb 3, 2026
13 checks passed

Conversation

DustyShoe commented Jan 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Related Issues / Discussions

QA Instructions

Merge Plan

Checklist

Uh oh!

DustyShoe commented Jan 19, 2026

Uh oh!

lstein commented Jan 20, 2026

Uh oh!

dunkeroni left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

dunkeroni commented Feb 2, 2026

Uh oh!

DustyShoe commented Feb 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

DustyShoe commented Feb 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dunkeroni commented Feb 3, 2026

Uh oh!

DustyShoe commented Feb 3, 2026

Uh oh!

dunkeroni commented Feb 3, 2026

Uh oh!

dunkeroni left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

DustyShoe commented Jan 18, 2026 •

edited

Loading

DustyShoe commented Feb 3, 2026 •

edited

Loading

DustyShoe commented Feb 3, 2026 •

edited

Loading