ToolRobinNo account needed

Liquid Glass Orb Studio

Design an animated glass sphere and export a transparent PNG, looping WebM or standalone HTML.

Choose a preset, tune the sphere and highlights, then export a transparent PNG for a mockup, a six-second loop for a motion edit or a standalone HTML renderer.

Live preview

WebGL2 shader renderer

No input or settings are sent. Rendering stays in this browser.

Preparing live preview…

WebM alpha can vary by browser codec; check the output in your editor.

Background
Fragment shader
How to use

Create a glass orb for a web project

Design an animated glass sphere and export a transparent PNG, looping WebM or standalone HTML.

Step by step

  1. Provide the source using: Presets.
  2. Set: Glass tint / Sphere size / Refraction / Gloss / Rotation speed / Transparent / Background color / PNG size. Use the reference below to choose the options that fit your task.
  3. Choose: Download PNG / Record 6-second WebM / Download standalone HTML. Inspect the result before copying, downloading or using it elsewhere.
  4. Choose a preset, tune the sphere and highlights, then export a transparent PNG for a mockup, a six-second loop for a motion edit or a standalone HTML renderer.

Choosing the settings

OptionWhat changes
PNG size / TransparentPNG saves a still image; WebM records a 6-second animation; standalone HTML keeps the renderer for a browser that supports WebGL. PNG transparency is suitable for still assets. Test WebM transparency in the receiving browser or editing app.

Example and expected result

Example: choose Aurora and keep transparency on. A 1024 px export is a 1024 × 640 PNG with transparent space around the sphere. WebM alpha support depends on the browser codec and editing app.

If it is not working

  • If the renderer cannot start, check that the browser supports WebGL. For an unsupported video codec or lost transparency in another app, use a PNG for the still image or test the WebM in the destination app before relying on it.

You might also need