Eclipse Rays: a sunburst of indigo and pink rays around a dark core
Eclipse Rays uses the Rays gradient type, which turns the bars into 24 wedges fanned around the first color spot, placed here in the middle of the frame. Inner radius at 34 opens a near-black disc at the centre, so indigo blue rays start at its edge and warm to pink before they fade out at the tips, like a corona around an eclipsed sun. Distort and Swirl are both 0 to keep every wedge straight, and with Animate on at Speed 20 their lengths drift slowly.
Make it yours
Open or close the core
Inner radius is 34, which leaves a wide dark disc for a logo or a short headline. Drop it toward 5 and the rays meet almost at a point for a classic sunburst; push it past 60 and they shorten into a narrower halo.
Change the ray count
Bands sets how many wedges there are, and 24 is the maximum. For a bold retro sunburst with wide slices, try 12. Soft at 35 controls how gently each ray fades at its tip, so raise it for a hazier glow.
FAQ
Can the rays start from a corner instead of the centre?
Yes. Rays always fan out from the first color spot, which this look places in the middle of the frame. Move that spot toward an edge or a corner and the sunburst follows it, giving a rising sun composition with the rays spreading across the page.
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.