What Is Spline? A Guide to Using 3D Models in Webflow

What Is Spline?

Spline is a tool that lets you create 3D models and animations for free.

Released around 2020, Spline has been adopted by many web designers.

With its simple interface, even beginners to 3D modeling can use it easily.

You can export 3D models created in Spline as a URL, embed code, images, or videos. By pasting a snippet of code, you can quickly place and animate a 3D model on your website.

Although 3D creation can seem intimidating, Spline provides lots of tutorials!

Find something similar to what you want to make and follow along—you can produce solid results just by mimicking the steps.

There’s also a Library packed with ready‑made 3D models.

If building models from scratch feels difficult, try playing with Library objects first to learn structure and controls.

There are plenty of cute objects, too—simply tweaking shapes, colors, and materials is fun on its own.

Benefits of Adding 3D Objects to a Website

By using 3D, you can convey depth and spatial relationships that are hard to communicate with flat illustrations, images, or text alone.

With Spline, you can create many types of 3D content—products, characters, abstract art, and more.

Leveraging these assets can leave a strong impression and help draw users to your site.

Relationship with Webflow

Webflow offers excellent features for web design and development.

Recently, at a conference in San Francisco, Webflow announced an integration with Spline.

This makes Spline available directly from the Webflow interface and even allows you to add animations from within Webflow.

For details, see this video:

Exporting from Spline to Webflow

1. Click Export in the top bar and choose Viewer (the second option from the top).

1. In Play Settings, choose your export options:
   • Set the background color to None (transparent).
   • Set Orbit / Pan / Zoom / Soft Orbit to No if you don’t want users to move the 3D model on the site.
     After changing settings, click Upload Viewer at the bottom to apply.

1. In Overview, copy the code at the very top.

1. Open Webflow. From Add > Media, drag Spline Scene into the spot where you want the 3D model.

1. Click the gear icon on the Spline Scene to open Settings, then paste the copied URL/code into the URL field.

Animating Spline in Webflow

In Webflow, you can animate 3D models created in Spline.

There’s no special workflow just because it’s a Spline element. As with other elements, select the Spline scene and create an interaction.

When a Spline scene is selected, you’ll see Spline‑specific options appear in the animation panel.

Choose these and adjust position, size, and rotation values to animate your 3D model freely.

For scroll‑based animations, see the detailed walkthrough in our Academy video.

Conclusion

The integration of Webflow and Spline expands what’s possible in web design.

By taking advantage of these powerful tools, you can craft websites that truly captivate users.

You can learn more about Webflow and Spline in our Academy. If you’re interested, check it out!