Home › Templates › Sunrise Bands
Sunrise Bands
Orange at the core, then coral, then blue rings out to white, banded for a landing hero.
CSS
background: radial-gradient(circle at 30% 20%, #F16518 0%, #F17466 33%, #8FA9E9 67%, #C9DBF2 100%);Mesh and animated state live in the studio. This page shows a CSS fallback from the palette.
What is the Sunrise Bands gradient?
Orange at the core, then coral, then blue rings out to white, banded for a landing hero.
How to use Sunrise Bands
Customize this gradient in the studio, copy the CSS on this page, or download a marked 1920px PNG. 4K and SVG stay on Pro.
Related gradients
ProGradients SignatureThe house blend: warm coral on the left easing through mauve into slate blue.
Cyber Gold GridGold across the top, purple through the middle, near-black at the bottom, with a fine grid over the whole field.
Powder MeshAlmost white, with blush and lilac only at the edges, quiet enough for an editorial page.
Low SunBurnt orange in one corner, peach across the middle, teal at the far edge, for a landing section that wants warm and cool in the same frame.
VolcanicOrange and a streak of red coming out of black in one corner, loud on purpose, for thumbnails.
Signature NoiseSlate blue, mauve, and coral under heavy grain, a bright spot in the middle, for a landing page or a wallpaper.
Caustics DepthNear-black water with faint pale streaks, for a background that stays behind the type.
Amber MeshGold light pooled on dark navy, grain across the field, for a page that wants warmth without leaving black.
Ember BloomBurnt orange around a pale cream streak, grain over the mesh, for a warm hero.
Regalia BarsMauve on the left easing into pale gold, soft enough that it reads as one wash, for a dark editorial header.
Ocean MeshPale cyan and white melted into a soft mesh, deeper blue in the corners, for social graphics.
Purple DotsDeep purple with a fine dot grid, slightly darker toward the middle, for a poster or a thumbnail.
Updated October 2026
