Spline Design has introduced the 3D Shape effect to Hana, its browser-based web design and 2D canvas tool — letting designers turn any flat vector shape into a fully lit, material-aware 3D object in a single step, with the original 2D shape remaining editable throughout.

Spline has been building toward a unified 2D and 3D design platform for some time, and the 3D Shape effect is the clearest expression of that direction yet. Until now, working with 3D required switching entirely to Spline's 3D editor, a separate surface from the 2D canvas where designers lay out frames, components, and interactive experiences. The 3D Shape effect collapses that distinction by allowing any 2D shape drawn in Hana to gain depth, volume, and realistic lighting without leaving the canvas workflow.

The implementation works through a non-destructive layer: the original 2D shape stays fully editable, and any modification made to it updates the corresponding 3D form in real time. Designers can adjust lighting, apply materials, and map environment reflections, then animate the 3D object between states using Spline's interactivity system. The same parameters exposed in the 3D Shape panel — depth, bevel, material surface, and environment — are available for keyframe animation and event-based triggers.

This approach matters because it removes a significant friction point in design-to-web workflows. Interactive 3D elements on websites typically require either pre-rendered video, static images, or a developer writing Three.js or WebGL by hand. Spline's web export embeds a lightweight viewer component that runs the full scene in the browser, including physics, interactivity, and animation. Designers can now take a vector shape — a logo, a UI element, an abstract form — apply a 3D treatment, and ship it as interactive web content without leaving the design tool.

How Spline's 3D Shape Effect Redefines Web Design Workflows

Spline's recent update also includes AI-powered features inside Hana, including image generation, variation creation, background removal, and upscaling — all accessible within the canvas without switching to a separate tool. The platform now supports full appearance customization with system, light, and dark modes switchable from both the dashboard and the editor.

Spline is used by design teams at companies including Linear, Vercel, and Loom, who cite it as a way to give products a more tactile, premium feel through interactive 3D elements that would otherwise require dedicated engineering work. The 3D Shape effect expands that opportunity to any designer working with flat vector shapes — no 3D modeling background required.

The platform is free to start at spline.design, with team and enterprise plans for collaborative and production deployments.