# Gradient Sphere

Animated gradient spheres: glossy 3D balls whose colour swirls like marbled ink, and a frosted glass sphere with an ember inside. 4 layouts and 8 colour sets. Download a PNG, a video loop or the embed code.

Page: https://www.browsermoon.com/gradient-sphere (live animated gradient generator, runs in the browser)

A gradient sphere is a 3D ball filled with moving colour. Here the paint inside each sphere folds, turns and breathes like marbled ink, so it reads as a living object instead of a flat circle. Use one large sphere as the hero of an AI product, a frosted glass sphere as an assistant that is thinking, or a ring of small spheres to show a collection of features.

## 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 assistant and voice app visuals:** The Frosted sphere looks like an assistant thinking or listening. Turn Flow up while it speaks, down while it waits.
- **Hero sections and product launches:** One large Marble sphere next to your headline gives a landing page a single strong object, without a photo or 3D model.
- **Feature and collection pages:** Orbit puts six small spheres on a ring, one per feature, plan or product, with room for a title in the middle.
- **App icons and avatars:** Save a square PNG and use a sphere as an app icon, an avatar for your AI agent or a profile picture.

## Frequently asked questions

### What is a gradient sphere?

A gradient sphere is a ball shaded with colour gradients so it looks three dimensional. Animated gradient spheres move the colour inside the ball, which makes them feel alive.

### How do I make a 3D gradient sphere without Blender?

Pick a layout and colour set here. The sphere is drawn live with a WebGL shader, so there is no 3D model to make or render. Download a PNG or video, or copy the embed code.

### Can I use a gradient sphere for an AI assistant?

Yes. The Frosted sphere is made for it: an ember of colour moves inside frosted glass, like an assistant thinking. Many AI apps use an animated sphere or orb as the assistant.

### How do I add an animated gradient sphere to my website?

Copy the embed code and paste it where the sphere should go. It works in any HTML page, Framer, Webflow and apps built with Lovable, Bolt, v0, Cursor or Claude Code.

### Does the sphere slow down my page?

No. It is one small shader, it limits resolution on high density screens and it stops moving for visitors who prefer reduced motion.

## 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)
- [Bloom Gradient](https://www.browsermoon.com/bloom-gradient)
- [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.