Spline for beginners: 3D for the web without code

Step 1

Sign up and see how other scenes are made

Spline runs in the browser and stores files in the cloud; there's also an app for macOS and Windows. As of November 2026 the free plan costs $0: a limited number of personal files, access to the Spline Library, no AI credits, and web exports with a watermark. Paid plans remove the watermark and add AI credits. Before creating your own scene, open the Library and Community: they have ready-made scenes you can remix and take apart.

• •open 2–3 Community scenes and see which objects, materials and lights they're made of;
• •pick a learning brief: a 3D icon for a landing page, a rotating logo or a button that reacts on hover;
• •write down what role 3D plays on the page: decoration or part of the message.

Step 2

Camera, objects and composition

Create a new file and learn to move the camera first. According to Spline's docs: orbit with Option (macOS) or Alt (Windows) + click and drag, zoom by scrolling, pan with Space + click and drag. Then add simple objects: a cube, a sphere, a torus. The same composition principles apply in 3D as in 2D: a main object, balance, empty space.

• •start with one main object and 1–2 supporting ones;
• •check how the scene looks from the angle a site visitor will see it from;
• •name objects in the layers panel: you'll need that when adding interaction.

💡 The principles of balance and focus are the same as in flat design: see Composition in design.

Step 3

Materials, light and color

A flat-looking 3D scene usually has a lighting problem, not a shape problem. Give objects materials and limit the palette as you would in 2D: a main color, an accent and neutrals. Add light so the object has a lit side and a shadow side: the contrast of light and shadow is what creates volume.

• •2–3 colors for the whole scene, no more;
• •one main light sets the direction; others only softly lift the shadows;
• •match the scene background to the background of the page it will go on.

Step 4

Interactivity: states, events and actions

Interactivity in Spline is built without code from three parts. A state is another version of an object: bigger, a different color, rotated. Select an object and click "+" in the States panel: you get the Base State (how it looks now) and a new State where you change properties. Then add an event (such as hover or click) and an action that switches the state. Check the result in Play mode.

• •start with one interaction: the object grows slightly on hover;
• •motion should be short and soft: long, abrupt animations distract from the page content;
• •think about phones: there's no hover on a touch screen.

💡 Spline has an AI agent and prompt-based 3D model generation, but they use AI credits, which the free plan doesn't include. For learning that's actually good: build your first scenes by hand so you understand what they're made of.

Step 5

Optimize the scene and put it on a site

Click Export in the toolbar and choose Public URL: Spline generates a link to the scene and embed code that works in Webflow, Framer, WordPress, Notion and other tools. In Play Settings you can set the camera, orbit, zoom and behavior on page scroll. After changing the scene, click "Update Public URL". Before embedding, open the Performance panel: it shows an estimate of export size, loading time and polygon count.

• •reduce the polygon count: lower the number of sides on parametric objects, and smoothing rarely needs more than 1–2 subdivision levels;
• •turn on geometry and image compression in the export settings;
• •delete unused objects and materials;
• •check the page with the scene on a phone: 3D shouldn't delay the main text and button from appearing.

💡 Show the scene in the community with context: which page it will live on and what it should convey. Then the feedback is about the brief, not just "pretty or not".