How To Get Rid Of Built With Spline: Removing The Watermark And Branding

Removing the Spline branding badge from your embedded 3D web scenes requires a specific subscription tier or CSS override technique depending on your project architecture. By understanding the DOM structure injected by the Spline viewer script, developers can seamlessly eliminate the promotional watermark and achieve a fully white-labeled user experience.

Technical Requirements and Export Prerequisites

Preparing to clean your web production environment of third-party branding requires an understanding of how Spline injects its viewer iframe and custom elements into a DOM tree. Before attempting style overrides or account upgrades, you must audit your implementation method—whether you are using the native Spline viewer script, an iframe embed, or a framework-specific wrapper like React Spline.

• Essential tools and assets: Access to your web hosting environment, CSS injection capabilities or developer dashboard, and your active Spline project file.
• Mandatory prerequisite knowledge: Basic familiarity with CSS specificity rules, DOM element targeting via custom attributes, and SaaS subscription tiers associated with your Spline account.
• Estimated execution time and budget: Upgrading an account takes under 5 minutes with a standard monthly fee; applying CSS overrides takes 10 to 15 minutes of testing across viewports.

Step-by-Step Spline Branding Removal Workflow

Step 1: Upgrade Your Spline Subscription Tier

The most direct and fully supported method to eliminate the Spline watermark is upgrading your account from the free plan to a paid professional or team subscription. Free tier exports automatically append the floating "Built with Spline" badge to the bottom right corner of the viewer canvas. Once your account is upgraded to a paid tier, navigate to your project settings inside the Spline editor, open the export panel, and locate the branding toggle switch. Turn off the "Show Badge" or "Spline Watermark" option, then generate a fresh export code or update your published link to reflect the changes instantly.

Pro-Tip: If you manage multiple client projects, ensure you upgrade the specific workspace where the 3D asset was created, as project permissions and export attributes are tied directly to workspace ownership.

Step 2: Target and Hide the Branding via Custom CSS

If you are operating on a tier or legacy setup where programmatic hiding is necessary, you can use custom CSS rules to target the container element injected by the Spline viewer script. The Spline viewer typically injects a shadow DOM or a specific container class containing the anchor tag for the watermark. Inspect your browser's developer console (F12) while hovering over the badge to identify its unique tag, which often maps to elements like a custom canvas overlay or an anchor tag pointing to the Spline domain. Apply a targeted display none or visibility hidden property within your stylesheet, making sure to scope the rule so it does not interfere with the interactive 3D canvas itself.

Warning: Relying solely on CSS workarounds to hide third-party elements can break if the vendor updates their viewer script architecture, making the subscription upgrade the only future-proof solution.

Step 3: Implement Mutation Observers for Dynamic DOM Cleanups

When working with framework integrations like React, Vue, or Angular, the Spline viewer script may re-render the badge asynchronously after the initial page load, bypassing standard CSS rules. To combat this, write a lightweight vanilla JavaScript MutationObserver script that listens for DOM tree mutations within the wrapper container. Configure the observer to scan for newly injected nodes matching the watermark selector and instantly remove them from the document object model the millisecond they appear. Append this script to your main layout file, ensuring it executes only after the window load event has fired to avoid race conditions.

Comparative Overview of Spline Removal Approaches

Common Implementation Failures and Field Fixes

• Failure: The CSS rule hides the entire 3D canvas along with the watermark.

  
  
  
  • Root Cause: The CSS selector was applied too broadly to the parent wrapper instead of the specific child anchor or canvas overlay class.
  • Actionable Fix: Use the browser inspector to isolate the exact CSS class or attribute selector unique to the badge, such as targeting elements containing the specific target URL, rather than styling the main viewer container.

• Failure: The watermark reappears every time the user interacts with the 3D scene.

  
  
  
  • Root Cause: The viewer component resets its internal state and re-injects default child elements upon focus or window resize events.
  • Actionable Fix: Deploy a JavaScript event listener that re-applies your hiding logic or switch to a paid subscription tier where the watermark is suppressed at the server rendering level.

• Failure: Upgrading the account did not remove the badge from an embedded iframe.

  
  
  
  • Root Cause: The embed code was cached by a content delivery network (CDN) or your browser, serving an older version of the export payload.
  • Actionable Fix: Clear your browser cache, purge your website hosting cache, and verify that you copied the newly generated embed code from the updated Spline project dashboard.

Frequently Asked Questions

Can I remove the Spline watermark on the free plan?

While you can technically hide the badge using advanced CSS or JavaScript mutation observers, these methods are prone to breaking when Spline updates its viewer scripts. Officially and reliably removing the badge requires upgrading to a paid Spline subscription plan.

Does removing the Spline badge improve website loading performance?

Removing the visual badge element via CSS or account settings has a negligible impact on raw performance metrics. However, ensuring your Spline scenes are properly optimized with compressed textures and minimal geometry polygons will dramatically improve loading speeds.

Will modifying the Spline viewer code violate terms of service?

Using external CSS overrides or browser scripts to alter elements rendered by third-party vendor scripts can sometimes violate platform terms or cause unexpected rendering bugs. Upgrading your account to an authorized tier is always the safest method for commercial projects.

Why is the watermark still visible after I turned it off in settings?

This issue is usually caused by browser caching or outdated embed codes. Make sure you clear your local cache, regenerate the export code from your Spline dashboard, and paste the fresh snippet into your HTML file.

Optimize Your 3D Web Experiences Today

Mastering professional 3D web asset integration ensures your digital portfolio maintains clean, professional branding without third-party distractions. Upgrade your workflow standards and elevate your web projects by implementing scalable asset management practices today.