BrowserMoon Animations templatesAnimated gradient sphere template in 8 colours

Animated gradient sphere template in 8 colours

Animated gradient sphere template: one large 3D marble sphere with eight colours to switch between, lavender, ember, tangerine, coral, sky, lagoon, dusk and indigo. The gradient sphere is a live WebGL shader whose colours swirl, turn and breathe. Use this AI template with Claude Code, Replit, Lovable, ChatGPT Codex, Bolt, Cursor, or another coding tool.

Animations Background Minimal0 copies

Animated gradient sphere template in 8 colours, design preview

About this vibe coding template

Animated gradient sphere template: a large 3D gradient sphere on a light page, drawn by a live WebGL shader with marbled colour that slowly swirls and wraps around the ball. Switch between lavender, ember, tangerine, coral, sky, lagoon, dusk and indigo with the colour buttons, then keep the one you want. The sphere is a single canvas and a small script. It sizes itself to its container, pauses when scrolled out of view, swirls faster on hover and stays still for people who turn on reduced motion. No Three.js and no libraries. Use a gradient sphere as a hero visual, a brand mark for an AI product, or a colourful accent beside a headline. More in our gradient sphere templates and animated gradient backgrounds.

Build a full SaaS landing page or website with this template design

A SaaS landing page or website is multiple pages that need to feel like one professional site, so one well built coding template can set the standard for every page after it. Copy the template, paste it into Claude Code, Replit, Lovable, ChatGPT Codex, Bolt, or Cursor, and send this alongside it.

Paste into Claude Code, Replit, Lovable, Bolt, or Cursor

Not sure this design fits?

Ask Mon, the AI design assistant, if the Animated gradient sphere template in 8 colours works for your product and how to adapt it.

Ask Mon

Design guides: Stripe website design · Why is my landing page not converting?

Common questions about this template

What is an animated gradient sphere?

A 3D looking ball filled with moving colour. Here each gradient sphere is drawn live by a WebGL shader, so the marbled colours swirl and turn around the ball instead of playing a video.

How do I add a gradient sphere to my website?

Copy the template, keep the colour you want and paste the code where the sphere should sit. It is one canvas and one small script, and it works in plain HTML, React, Next.js, Framer embeds and code from Lovable, Bolt or Claude Code.

Does the gradient sphere need Three.js?

No. Each sphere uses plain WebGL with no dependencies, so it adds a few kilobytes instead of a 3D library.

Will the animated sphere slow my page down?

It pauses when it scrolls out of view, caps the pixel ratio at 2 and stops moving for visitors with reduced motion turned on, so it stays light even with several spheres on one page.

Can I change the sphere colours?

Yes. Each sphere takes four colours: base, swirl, highlight and shadow. Change the hex values, or ask your coding tool to match the sphere to your brand colours.