3D Gradient Sphere Generator

How to build your gradient orb

Follow these checkpoints when dialing in marketing-ready artwork.

1. 1

   Choose stops or load a preset

   Three hex picks define the baked Canvas gradient mapped onto the sphere UVs. Presets seed harmonious jewel tones you can nudge toward campaign palettes.

2. 2

   Pick radial versus linear mapping

   Radial gradients read like spotlight glow across the orb — ideal for SaaS heroes. Linear bands streak horizontally across UV space for sporty stripes or synth-wave moods.

3. 3

   Stage HDRI and canvas backdrop

   Swap among ten studio Drei environment presets (city, forest, night, and more) and pick slate, white, dark, or a transparent checkerboard. Reflections and rim light follow the HDR you choose.

4. 4

   Balance metalness, clearcoat, and roughness

   Metalness and environment intensity control how much the HDR fills the orb; clearcoat and clearcoat roughness add a separate glossy shell without repainting the gradient map.

5. 5

   Freeze motion, share a link, export PNG

   Freeze the float and spin for a static hero, enable camera auto-spin for screen recordings, reset the orbit view, copy a URL that restores every slider — then download a solid or transparent PNG up to a 3840 px long edge.

Where gradient spheres outperform flat gradients

Depth cues keep audiences engaged even when motion graphics budgets shrink:

• Music & streaming thumbnails

  Gradient spheres signal playful motion graphics without embedding heavy MP4 loops inside emails.

• Wellness & mindfulness branding

  Soft radial spheres reinforce calm copy blocks without literal photography shoots.

• Crypto & rewards dashboards

  Orb motifs imply liquidity or rarity tiers without depicting regulated securities imagery.

• Conference keynote transitions

  Still PNG plates composite cleanly under titles when venue Wi-Fi blocks autoplay video.

Accessibility and vestibular comfort

Floating animation can aggravate viewers sensitive to oscillating motion. Offer still PNG exports alongside animated teasers, slow spin speeds near zero for keynote slides, and pair saturated spheres with high-contrast typography so WCAG contrast ratios remain intact on luminous gradients.

Craft tips for polished orbs

Minor tweaks avoid accidental candy-coated renders when brands demand restraint.

• Keep emissive intensity modest unless designing neon nightlife aesthetics — editorial decks rarely exceed 0.25.
• Match slate viewer hex (#f8fafc) when layering non-transparent PNGs atop identical web backgrounds for seamless blending.
• Transparent PNG exports drop the canvas fill to alpha — keep contact shadows on for grounded product shots, or disable them for a floating orb.
• If bands look uneven in linear mode, rotate the orbit camera — UV seams become design features instead of bugs.
• Reduce spin speed before exporting stills intended for print — motion blur perception differs from GPU renders.

Privacy-first WebGL iteration

Shader math executes locally — helpful when agencies test unreleased palette directions from airport lounges without uploading intellectual property to remote GPU farms.

Frequently asked questions