How to Create 3D Web Graphics with Spline

Spline is a browser-based 3D design tool with a Figma-like interface that lets you model, animate and export interactive 3D scenes for websites. You start a file, drag primitives, apply materials, then export as an image, video, or a live embed.

What Is Spline and Who Should Use It?

Spline targets designers and front-end developers who want 3D on a landing page without learning Blender. The editor runs in Chrome, Safari and Firefox with no install. The learning curve is shallow because the panels mirror design tools: layers on the left, properties on the right, a canvas in the middle.

The free plan gives you unlimited personal files and Spline’s watermark on exports. Solo runs about $9/month, and the Super plan near $25/month adds team libraries and higher export limits.

How Do You Start and Shape a Scene?

1. Open spline.design and click “New File.”
2. Pick a primitive from the top toolbar and drag it onto the canvas.
3. Switch to Edit Mode (press E) to move vertices, edges and faces.
4. Adjust corner radius in the properties panel to soften hard edges.

Note the mode switch: Spline has Object mode and Edit mode, and new users often try to vertex-edit while stuck in Object mode. If nothing moves, press E.

How Do You Apply Materials and Lighting?

Open the Material panel on the right. You get Standard and Physical materials. Physical gives you roughness, metalness and clearcoat for realistic surfaces; Standard is lighter and fine for stylised looks.

Lighting defaults to a studio HDRI. Swap it in the Environment tab — there are about a dozen presets, plus you can upload your own HDR. The single biggest visual upgrade for beginners is adding one point light with a warm color to break the flat default environment.

Can You Add Animation Without Code?

Yes. The States panel lets you record object states and blend between them, and events can trigger transitions on click, hover or scroll. A 2-second rotation loop on a product model is three steps: select the object, add a rotate event, set the loop. No timeline keyframing required for simple motion.

How Do You Export or Embed?

Hit Export in the top right. Options include PNG, JPG, video (MP4), GLB, and a public URL. For a website, the live embed is usually easiest — paste the iframe snippet where you want the scene. For React projects, Spline publishes a runtime package you can install and load the exported scene from.

One limit worth knowing: the free tier caps how many files you can embed publicly, and web export size is bounded. Heavy scenes with many textures will hit that ceiling.

What Are the Practical Downsides?

Complex polygonal modelling is not Spline’s strength — you will not build an organic character here. Boolean operations exist but are limited. And because everything renders in the browser, a huge scene can tax the editor tab on older laptops. It is a design tool, not a replacement for Maya or Blender in a production pipeline.

Quick Summary

• Spline is a browser 3D design tool with a Figma-like UI; free tier has watermark and file limits.
• Switch to Edit Mode (E) to change geometry; Object mode only moves whole objects.
• Physical materials + a custom HDRI give the biggest visual lift for beginners.
• States and events add hover/click animation without code.
• Export as image, video, GLB, live embed or React runtime — not for organic modelling.