Home › Templates › Hero section gradients
Hero section gradients
Hero section gradients on ProGradients
Updated October 2026
Sunrise BandsOrange at the core, then coral, then blue rings out to white, banded for a landing hero.
Canyon SunriseA hot magenta core fading to black at the edges, with a fine dot grid, for a launch hero that only needs one color.
Powder MeshAlmost white, with blush and lilac only at the edges, quiet enough for an editorial page.
Wave CausticsA black field with a pale gray sweep of light through the middle, for a dark thumbnail.
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.
Purple DotsDeep purple with a fine dot grid, slightly darker toward the middle, for a poster or a thumbnail.
Ocean MeshPale cyan and white melted into a soft mesh, deeper blue in the corners, for social graphics.
Blueprint HaloA cobalt disc fading out to gray, bright in the middle so a headline can sit on the blue.
What is a hero section gradient?
Hero section gradients are named ProGradients templates you can open in the browser, copy as CSS, and customize.
Can I use these gradients commercially?
Gradients you create in ProGradients are yours for client and commercial work, subject to the Terms of Service.
How do I add a hero section gradient in CSS?
Open a template on this page, copy the CSS block, and paste that background into a stylesheet or a Tailwind class.
Which export stays free?
CSS, Tailwind, and a marked PNG up to 1920px stay free. 4K, SVG, and batch sizes stay on Pro.
