Bloom Gradient
Animated bloom gradients: a soft dome of light that breathes on its own, its edge melting from gold through coral and pink into blue. 4 motions and 5 colour sets for AI app states and calm hero sections. Download a PNG, a video loop or the embed code.
Bloom Gradient examples
Templates with this gradient
Other animated gradient styles
A bloom gradient is a gradient that melts into light, like a sun seen through soft focus. This one is a glowing dome: pale gold at the core, coral and pink around the edge and a blue glow along its base. It breathes on its own, and each motion fits a moment in an AI app: Rise for a welcome screen, Pulse while an assistant answers, Shimmer while something loads and Sunset for a calm close.
Show it off: put your gradient on a 3D laptop mockup
Where to use it
AI app states
Use Pulse while your assistant answers, Shimmer while it loads and Rise when it is ready. Same sun, a different motion for each state.
Sign up and welcome screens
A breathing sun behind a sign up form feels warm and calm, and draws the eye to the form without a photo.
Hero sections
Sunrise on white is light and optimistic. Dusk puts a saturated sun on grey for a moodier, more premium hero.
Launch posts and stories
Switch to 9:16 or 4:5 and save a video loop. Sunset rises and sets on its own, which suits launch countdowns.
How to make an animated gradient background
- Pick a shape or style.
- Pick your colours.
- Set the speed, flow and grain until it feels right.
- Pick a size: hero, square, social post, story, banner or card.
- Download a PNG or video loop, or copy the embed code into your site, Framer, Webflow, Bolt, Lovable or Claude Code.
Frequently asked questions
What is a bloom gradient?
A bloom gradient is a soft gradient that glows as if light is bleeding through it, like the bloom effect in photography. Here it forms a sun shaped dome of light with a gold core and a coloured edge.
How do I use the bloom gradient for AI app states?
Pick the motion that fits the moment: Rise when the app is ready, Pulse while an AI answers, Shimmer while something loads and Sunset for a calm idle or goodbye. Export each one as a video loop or embed code.
Can I change the colours?
Yes. Pick from Sunrise, Warm, Dusk, Arc and Ocean. Warm drops the blue base for an all warm glow, and Dusk sets the sun on a grey background.
How do I add the bloom gradient to my website?
Copy the embed code and paste it where the background should go. It is plain HTML with one canvas and a small script, so it works in any site and in apps built with Lovable, Bolt, v0, Cursor or Claude Code.
Narrow it down
Works with any vibe coding tool
Stripe-style describes the look. BrowserMoon is not affiliated with Stripe.