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.

Marble · Tangerine1080 × 1080
One large marbled sphere, its paint swirling

Gradient Sphere examples

Tangerine gradient sphere background, marble shape
Gradient sphere: Marble, Tangerine
Lavender gradient sphere background, marble shape
Gradient sphere: Marble, Lavender
Coral gradient sphere background, marble shape
Gradient sphere: Marble, Coral
Sky gradient sphere background, marble shape
Gradient sphere: Marble, Sky
Lagoon gradient sphere background, marble shape
Gradient sphere: Marble, Lagoon
Tangerine gradient sphere background, frosted shape
Gradient sphere: Frosted, Tangerine
Tangerine gradient sphere background, pair shape
Gradient sphere: Pair, Tangerine
Lavender gradient sphere background, pair shape
Gradient sphere: Pair, Lavender
Coral gradient sphere background, pair shape
Gradient sphere: Pair, Coral
Tangerine gradient sphere background, orbit shape
Gradient sphere: Orbit, Tangerine
Coral gradient sphere background, orbit shape
Gradient sphere: Orbit, Coral

Templates with this gradient

Hero section with animated gradient orbs previewHero section with animated gradient orbsAnimated gradient orb template in 8 colours previewAnimated gradient orb template in 8 coloursGlowing glass orb animation for dark websites previewGlowing glass orb animation for dark websitesAI gradient orb animation for SaaS brands previewAI gradient orb animation for SaaS brands

Gradient backgrounds by colour

PurplePinkBlueOrangeGreenDarkPastelRainbow

Other animated gradient styles

Stripe Gradient Background previewStripe Gradient BackgroundGlow Gradient Background previewGlow Gradient BackgroundAI Orb Animation previewAI Orb AnimationWave Gradient Background previewWave Gradient BackgroundSilk Gradient Background previewSilk Gradient BackgroundBloom Gradient previewBloom GradientWatercolor Gradient Background previewWatercolor Gradient BackgroundRibbon Gradient Background previewRibbon Gradient BackgroundLiquid Gradient Background previewLiquid Gradient Background

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.

Gradient Sphere example: an animated gradient made with the BrowserMoon generator
Gradient Sphere: example

Show it off: put your gradient on a 3D laptop mockup

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.

How to make an animated gradient background

  1. Pick a shape or style.
  2. Pick your colours.
  3. Set the speed, flow and grain until it feels right.
  4. Pick a size: hero, square, social post, story, banner or card.
  5. 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 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.

Narrow it down

All animated gradientsStripe gradientGlow gradientAI orbWave gradientSilk gradientBloom gradientWatercolor gradientRibbon gradientLiquid gradientMesh Gradient GeneratorGrainy Gradient GeneratorGradient Wallpaper MakerPurple Gradient BackgroundPink Gradient BackgroundBlue Gradient BackgroundOrange Gradient BackgroundGreen Gradient BackgroundDark Gradient BackgroundPastel Gradient BackgroundRainbow Gradient BackgroundAnimated gradient section templatesGradient orb templatesProduct launch video templatesFree app icon and favicon generatorFree 3D laptop mockup generatorAnimated gradient hero templatesHero section templatesSaaS landing page templatesPricing page templatesLanding page templatesAI app templates

Works with any vibe coding tool

LovableBoltReplitClaude CodeChatGPT CodexCursorFramerv0WindsurfGitHub CopilotGemini CLIGoogle AntigravityGoogle StitchKiroCline
What is vibe coding?SaaS templatesSaaS landing page templates

Stripe-style describes the look. BrowserMoon is not affiliated with Stripe.