Pyramid Bars: a symmetric bar gradient that peaks in cyan
Pyramid Bars lines up nine bars and sets Bar profile to Pyramid, so they climb step by step to the tallest one in the centre and fall away again on the other side. The Electric Tide palette runs across the row from royal blue through cyan to violet, each bar darkening slightly toward its foot on a midnight navy base. Animate is on, but the profile holds the shape and only a small share of noise lets the heights breathe, so it reads as a calm equalizer peak rather than a jumpy meter.
Make it yours
Flip the peak into a valley
Switch Bar profile from Pyramid to Valley and the tallest bars move to the two ends, leaving a dip in the middle where a headline can sit. Wave gives a rolling sine across the row instead.
Widen the steps
Nine Bands give broad steps. At 5 the pyramid turns into a blocky podium; at 17 or more it becomes a smooth staircase. Keep the count odd so one bar stands alone at the top.
FAQ
How is Pyramid Bars different from Solar Bars?
Solar Bars uses the Noise profile, so its bar heights are random and keep shifting when animated. Pyramid Bars sets the heights by position instead: tallest in the middle, shortest at the edges, with only a slight wobble. Pick it when the shape itself should carry the design, such as behind a centred product shot.
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.