3 way linear gradient

how can I fade from black at the top of the square to white at the bottom of the square, but on the same square fade from visible at the right to invisible at the left. can I add 1 fill effect on to an other

Hi. In a color picker I wrote, which looks roughly like the box + slider you see here, I achieved the effect by layering two gradient-based rects atop one another, with a multiply blend mode tying them together. Might be worth exploring.

It’s unfortunately a little framework-y, so not something you can just take and drop in, but most of the code for that is in color picker and HSV. Look for gradient and blend mode.

is the only solution? I ended up doing the same thing, and it also was for a color picker. it still has a few errors ,but I figured it out.

1 Like

Well, it’s not the only solution, but it seemed nice and neat to me. :slight_smile:

Since you mentioned fill effects, the way to layer them would be with multi-pass and linear gradient effects. I doubt it would be better than blend modes, though, unless you had yet another effect in mind. You did say “3 way” linear gradient, though…

Otherwise, there’s always individual rects or memory bitmaps and manually modifying the colors. This might be slow if you need fine resolution, however.

You could also

  1. create a display object with gradient fill, and
  2. create another display object with the other gradient fill, but apply a mask to this additional display object.
1 Like