How To Get Rid Of Built With Spline: A Complete Guide To Professional 3D Exports

Removing the "Built with Spline" watermark requires either a valid premium subscription upgrade or the strategic application of CSS and JavaScript overrides within your project’s frontend code. Ensuring a white-label 3D experience involves toggling visibility settings in the Spline export panel and verifying that your deployment environment correctly renders the modified spline-viewer component.

Pre-Deployment Planning and Technical Requirements

Before attempting to eliminate the branding from your 3D scenes, you must evaluate the technical constraints of your current workflow. Spline operates on a freemium model where the watermark serves as a primary attribution mechanism for the free tier. Removing this attribution without a license may conflict with the platform's Terms of Service, so professional environments should prioritize the official licensing route.

To successfully remove the badge and optimize your 3D scene for production, you will need the following assets and technical configurations:

• Active Spline Account: Access to the project file within the Spline design environment (web or desktop app).
• Subscription Tier: A Spline "Super" or "Pro" subscription is the official prerequisite for the "Logo: Hide" feature.
• Frontend Environment: Access to your website’s source code, specifically the section where the or Three.js export is embedded.
• DOM Manipulation Tools: Basic proficiency with CSS Selectors and JavaScript if you are attempting to style the viewer container programmatically.
• Performance Benchmarks: An understanding of how removing elements might impact the initial layout shift (CLS) of your webpage.
• Project ID/URL: The unique public link or export code generated by the Spline "Export" menu.

The estimated duration for an official removal via the dashboard is less than five minutes, while manual frontend overrides for specialized implementations may take fifteen to thirty minutes of testing across different browser engines.

Step-by-Step Instructions for Removing the Spline Watermark

Transitioning from a branded 3D viewer to a clean, professional aesthetic involves several layers of configuration. Follow these steps to ensure the watermark is removed correctly across all viewing devices.

Step 1: Upgrading Your Spline Workspace

The most direct and reliable method to get rid of the "Built with Spline" badge is to move from the Free tier to a paid plan. This unlocks the native toggle within the export settings, ensuring that the logo is never even loaded into the DOM (Document Object Model).

1. Log into your Spline account and navigate to the "Billing" or "Upgrade" section of your workspace settings.
2. Select a plan that includes "No Spline Logo" as a feature (typically the Super or Pro tiers).
3. Once the payment is processed, return to your specific 3D project.
4. Open the "Export" panel located at the top center of the application interface.
5. Under the "Play Settings" or "Scene Settings" tab, locate the "Logo" toggle and switch it to the "Off" position.
6. Click "Update" or "Save" to push these changes to your live public link or embed code.

Pro-Tip: If you have already embedded the code on your website, you must refresh the viewer script or update the URL in your iframe/viewer tag to reflect the change in project permissions.

Step 2: Utilizing the Export Settings Toggle

After upgrading, many users fail to see the change because they haven't updated their specific export configuration. The watermark is controlled on a per-project basis, meaning it is not automatically removed from every design just because you upgraded your account.

1. Inside the Export window, navigate to the "Web" or "Viewer" tab.
2. Look for the "UI Features" sidebar.
3. Ensure that the "Logo" checkbox is unchecked.
4. If you are using the web component, ensure that the "hint" or "logo" attributes are not explicitly set to true in your HTML code.
5. Regenerate the embed code. The new code will contain a different set of parameters in the URL query string that signals the Spline servers to serve the unbranded version of the viewer.

Step 3: Advanced CSS Overrides for Custom Integrations

In scenarios where you are using the Spline Viewer component and need to ensure the branding is suppressed via styles (often used by developers who want to maintain a specific UI wrapper), you can target the shadow DOM or the container elements. Note that the Spline Viewer uses a Shadow Root, which can make traditional CSS targeting difficult unless you use specific selectors.

1. Identify the container where the resides.
2. Apply a CSS rule to the viewer component to manage its overflow and visibility.
3. If the logo is part of the standard DOM, you can attempt to use the "display: none" property on the specific anchor tag that contains the "Built with Spline" text.
4. For more robust control, use the "pointer-events: none" property on the UI layer of the viewer if you only wish to prevent users from clicking the logo, though this does not hide it visually.
5. Use the "!important" declaration to ensure your styles override any inline styles injected by the Spline runtime library.

Warning: Relying solely on CSS to hide the logo on a Free tier project may lead to visual "flicker" where the logo appears for a fraction of a second during the loading state before your CSS is applied.

Step 4: Programmatic Removal via JavaScript

For developers using frameworks like React, Vue, or Next.js, you can manipulate the Spline object once it has mounted in the browser. This is particularly useful for enterprise applications where the 3D scene is part of a larger, complex interactive state.

1. Attach a ref to your Spline component or listener to the "load" event.
2. Once the "load" event fires, access the shadowRoot of the element.
3. Use the querySelector method within the shadowRoot to find the div or anchor tag associated with the Spline branding.
4. Remove the element from the DOM using the .remove() method.
5. This method ensures that the logo is purged from the accessibility tree as well, providing a cleaner experience for screen readers.

Spline Subscription Tiers and Branding Permissions

To help you decide on the best route for your project, the following table outlines the branding capabilities and technical limitations associated with each Spline account level.

Troubleshooting Common Watermark Persistence Issues

Even after upgrading or applying technical fixes, the Spline logo may occasionally persist on your live site. This is usually due to caching or misconfiguration in the deployment pipeline.

• Persistent Browser Cache

  
  
  
  • Root Cause: The browser is serving a cached version of the spline-viewer.js script or the specific project JSON file from before the branding was toggled off.
  • Actionable Fix: Clear your browser cache or open the site in an Incognito/Private window. If you are using a Content Delivery Network (CDN) like Cloudflare, purge the cache for that specific page URL.

• Outdated Embed Code

  
  
  
  • Root Cause: The website is still using an old iframe or script URL that does not include the updated "logo=false" parameter generated by the Spline backend.
  • Actionable Fix: Copy the fresh embed code from the Spline Export panel and replace the existing code on your website. Verify that the URL in the src attribute has changed.

• Shadow DOM Encapsulation

  
  
  
  • Root Cause: Your CSS overrides are failing because the logo is hidden inside a Shadow Root, which prevents global CSS from affecting internal elements.
  • Actionable Fix: Use the "::part" CSS pseudo-element if Spline has exposed the logo as a styleable part, or use JavaScript to penetrate the shadowRoot of the component specifically.

• Incorrect Project Permissions

  
  
  
  • Root Cause: The project was created in a personal workspace that does not have a subscription, even if your main workspace is upgraded.
  • Actionable Fix: Move the project file from your "Personal" folder to the "Pro/Super" workspace folder within the Spline dashboard to inherit the premium features.

Frequently Asked Questions

Can I remove the Spline logo for free using CSS?

While it is technically possible to hide the logo using CSS properties like display: none or by setting the opacity to zero, this generally violates the terms of the Spline free tier. Furthermore, Spline frequently updates their component structure, which may break your custom CSS overrides and cause the logo to reappear unexpectedly.

Does removing the logo improve the loading speed of my 3D scene?

Removing the logo itself has a negligible impact on performance, as the logo is a small vector or text element. However, upgrading to a paid plan allows for better export optimization and access to specialized compression formats like Draco, which significantly reduces the overall file size and loading time of your 3D assets.

Why is the "Logo: Hide" toggle grayed out in my settings?

This toggle is deactivated for users on the Free plan. To enable the toggle, you must subscribe to a paid tier. If you have already paid and it remains grayed out, ensure you are editing the project within the specific workspace associated with the premium subscription.

Will the watermark reappear if I cancel my subscription?

Yes, if your subscription lapses or is canceled, the "Built with Spline" watermark will typically reappear on all active public links and embeds associated with that account. To maintain a white-label experience, an active subscription must be maintained.

Can I replace the Spline logo with my own company logo?

Yes, once you have upgraded to a Super or Pro plan, you can hide the default Spline branding and use your own UI overlays. This is done by disabling the native logo and then creating a custom HTML/CSS overlay that sits on top of the 3D viewer container.

Enhance Your 3D Web Presence

Ready to take your web designs to the next dimension without the distraction of third-party watermarks? Upgrade your Spline workspace today or implement advanced frontend overrides to ensure your brand remains front and center.