Ember Grid: a rust and orange mesh gradient behind a technical grid
Ember Grid puts a graph-paper overlay on top of firelight. Underneath is a Mesh gradient on the Ember palette: burnt rust, orange and yellow glowing out of a base that is nearly black. On top, Pattern is set to Grid at size 22 and amount 45, a thin light lattice that gives the glow a measured, engineered feel for developer tools, infrastructure products and data stories.
Make it yours
Resize the grid cells
Halve Pattern size from 22 to 11 for a dense blueprint mesh, or push it to 40 for large cells that can echo the columns of your layout in the Landing page preview.
Let the grid whisper
Pattern amount is 45. Around 20 the lines become a faint trace, which keeps the engineered feel while leaving headlines alone. Grain is 20 here, so the surface still has texture when the grid recedes.
FAQ
How is the grid drawn over the gradient?
As a light overlay of evenly spaced lines, added after the colors are blended. It does not bend with Distort or Swirl, so the grid stays straight while the ember glow shifts beneath it. Dots and Lines are the other Pattern options if you want a softer or more diagonal texture.
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.