Topo Lines: a topographic contour line background in aqua and periwinkle
Topo Lines turns a gradient into a relief map. The Contour treatment traces lines along equal brightness, and with Tone levels at 12 there are up to 24 of them between the darkest and brightest parts of an aqua, periwinkle and emerald Mesh on the Nordic Night palette. The lines are drawn in the near-black base color over the colors themselves, bunching tightly where the tone changes fast and opening into wide plateaus where it levels out, with Distort 45 and Swirl 20 giving the terrain its winding shape.
Make it yours
Add or remove contours
Tone levels sets the spacing, and every level adds two lines. At 6 you get a sparse, calm map with 12 lines; at 16, the maximum, the terrain fills with 32 tightly packed lines that read as a texture.
Print it as a map
Switch Treatment colors to Duotone and the gradient drops away: the lines are drawn in the Dark color on a plain Light color, like a printed survey sheet. Set the pair to brown on cream for a classic hiking map.
FAQ
Where do the contour lines come from?
From the brightness of the gradient. The treatment blurs the image slightly, splits its tone into equal steps and draws a line along each step edge. Anything that changes the gradient reshapes the map, so moving a color spot or raising Distort shifts the hills and valleys.
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.