# 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. Page: https://www.browsermoon.com/bloom-gradient (live animated gradient generator, runs in the browser) 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. ## How it works 1. Pick a shape or style. 2. Pick a colour set. 3. Set speed, flow and grain. 4. Pick a size: hero 16:9, square, post 4:5, story 9:16, banner 3:1 or card. 5. Download a PNG or a video loop, or copy the embed code (one HTML block with a small WebGL script) into a website, Framer, Webflow or an AI coding tool. Previewing is free. Downloads and embed code come with a BrowserMoon licence and have no watermark. ## 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. ## 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. ## Other gradient pages - [Stripe Gradient Background](https://www.browsermoon.com/stripe-gradient) - [Glow Gradient Background](https://www.browsermoon.com/glow-gradient) - [AI Orb Animation](https://www.browsermoon.com/ai-orb) - [Wave Gradient Background](https://www.browsermoon.com/wave-gradient) - [Silk Gradient Background](https://www.browsermoon.com/silk-gradient) - [Gradient Sphere](https://www.browsermoon.com/gradient-sphere) - [Watercolor Gradient Background](https://www.browsermoon.com/watercolor-gradient) - [Ribbon Gradient Background](https://www.browsermoon.com/ribbon-gradient) - [Liquid Gradient Background](https://www.browsermoon.com/liquid-gradient) - [Mesh Gradient Generator](https://www.browsermoon.com/mesh-gradient) - [Grainy Gradient Generator](https://www.browsermoon.com/grainy-gradient) - [Gradient Wallpaper Maker](https://www.browsermoon.com/gradient-wallpaper) - [Purple Gradient Background](https://www.browsermoon.com/purple-gradient-background) - [Pink Gradient Background](https://www.browsermoon.com/pink-gradient-background) - [Blue Gradient Background](https://www.browsermoon.com/blue-gradient-background) - [Orange Gradient Background](https://www.browsermoon.com/orange-gradient-background) - [Green Gradient Background](https://www.browsermoon.com/green-gradient-background) - [Dark Gradient Background](https://www.browsermoon.com/dark-gradient-background) - [Pastel Gradient Background](https://www.browsermoon.com/pastel-gradient-background) - [Rainbow Gradient Background](https://www.browsermoon.com/rainbow-gradient-background) --- BrowserMoon (https://www.browsermoon.com) is a library of 570+ website templates and mobile app screens for people building with AI coding tools (Claude Code, Lovable, Bolt, Replit, Cursor, ChatGPT Codex). Each template is one HTML file you paste into the tool as the reference design. One licence is $349, one time, for unlimited projects. The mockup and gradient generators are free to use in the browser.