Difference Bars: two bar layers blended in Difference mode
Difference Bars stacks a second layer on a row of 12 bars: Layer type is also Bars, Layer flip is Vertical so its bars hang from the top, and Blend mode is Difference at full Layer opacity. Where an upright bar meets its hanging twin, the matching colors subtract to black, which cuts a dark band through the middle and splits every bar into separate blocks of blue, teal, cyan and violet. Bar profile is Wave, so with Animate on the heights ripple across the row and the black band keeps shifting.
Make it yours
Try a softer blend
Blend mode sets how the two layers combine. Screen adds them into glowing overlaps, Multiply keeps only the color both layers share, and Overlay or Soft light boost contrast without the black cut-outs of Difference.
Change the second layer
Set Layer type to Rays or Waves and the difference carves new shapes into the bars. Layer flip at Both turns the copy upside down and mirrors it sideways, and lowering Layer opacity to 50 fades the effect halfway.
FAQ
What does a difference blend do to a gradient?
It subtracts one layer's color from the other, channel by channel, and keeps the absolute value. Identical colors become black, dark areas let the other layer through unchanged, and contrasting colors produce new hues. That makes it a good fit for glitchy, poster-like graphics where the cut-outs are the point.
How it works
Pick a starting point
Start from one of 28 looks such as Soft Mesh, Eclipse Rays or Riso Halftone, or choose a gradient type and one of 24 palettes.
Tune the gradient
Adjust scale, distortion, swirl and softness, add grain, glass panes or glass tiles, a dot, grid or line overlay, a second blended layer or a treatment such as halftone or pixel sort, and switch animation on with its own speed.
Preview and use it
See the gradient in landing page, card, mobile and sign up layouts, then sign in with a free UX Pilot account to use it on the canvas or export it.