How to Hide Lovable Badge/Watermark from Your App

When you publish an app with Lovable, you’ll usually see their branding show up somewhere in your project. This might be the little “Edit with Lovable” badge, their logo, or some other form of branding/watermark that appears on your live site.

A lot of people ask how to remove the badge/watermark.
If that’s you, you’re in the right place. What I will cover:

• How to hide the Lovable badge
• Free options to remove Lovable logo/branding

I’ll also show you alternatives if you don’t want Lovable branding at all.

---

How to Hide “Lovable” Badge (Pro)

The simplest way to hide Lovable’s badge from your app is to go on the Pro plan. It will go away automatically once you subscribe.

1. Open your Lovable app
2. Click the project’s name (top left)
3. Go to “Settings“
4. Tick to enable “Hide Lovable Badge“

Lovable’s branding will then go away.

Again, note – you need to be on a paid plan!
→ Lovable pricing explained

If you’re on a paid plan, the only branding let is the “.lovable.app” domain.

To remove even that piece of branding, you need your own custom domain.
Then you’ll have to connect it to your Lovable app.

→ How to connect custom domain to Lovable

How to Remove Lovable Badge FOR FREE

You can remove Lovable branding for free just by sending this prompt: “Add to the CSS to globally hide anything with the ID lovable-badge”.

1. Open your project in Lovable
2. Send this prompt: “Add to the CSS to globally hide anything with the ID lovable-badge”.”
3. Lovable will auto-remove it for the entire project.

What this does:

• Every element on a Lovable app has an internal ID or class name. The “Edit with Lovable” badge is wrapped inside an element with the ID lovable-badge.
• By adding a CSS rule that targets this ID and sets it to display: none, you’re telling the browser: “Don’t render this element at all.”
• Since it’s added to your global styles, it applies across your entire project, so you don’t have to manually hide the badge on every page.

In short: you’re not deleting the badge from Lovable’s system, you’re just telling the browser not to show it. It’s still there in the code if someone inspects it, but to a normal visitor, it looks completely gone.

If that doesn’t work, try this Lovable troubleshooting guide.

How to Remove Lovable Badge with Code (Paid)

Go into Code view of your Lovable project, open the main index.html file, and look for the section. Add a small CSS rule there that hides the badge element, then save and republish so it no longer shows on your live app.

Note: this only works if you’re on a paid plan, since free users can’t access Code view.

Now…

Switch to Code view, open your index.html, and paste this CSS inside the <head>:

1. Open your project in Code view.
2. In index.html, add this inside the <head>:

<style>
  #lovable-badge { display: none !important; }
</style>

3. Save and republish your app.
4. Refresh your live site to confirm the badge is gone.

If the AI prompt doesn’t fully work, you can go straight into the code view and hide the badge manually. This is the method that has worked consistently for many users.

This code doesn’t actually delete the badge (Lovable still injects it into the DOM), but with “display: none !important” the browser never shows it to users.

What this does:

• It directly targets the Lovable badge element (which uses the ID lovable-badge).
• The display: none !important rule forces the browser to completely hide it, even if other CSS tries to re-enable it.
• You only need to add this code once, usually inside your index.html file, so it applies globally to your app.

Some users reported that when they click “Hide Badge” inside Lovable, the system sends two API calls back-to-back — the first sets hide badge: true, but the second immediately resets it to false.

Adding the CSS yourself bypasses this glitch and ensures the badge stays hidden.

---

Lovable alternative that’s honest about badges

We’ll be upfront, Shipper.now also adds a small branding badge by default.

The difference is, we don’t try to hide it or make it tricky to remove.

• If you want to keep it, great – it helps support the platform.
• If you don’t, you can remove it with the same quick CSS code method shown earlier in this guide.

→ Shipper vs Lovable

Other than that, Shipper gives you:

• Full code access — edit, export, or deploy anywhere
• AI that builds and fixes apps automatically
• Custom domains included without headaches

So if you want a platform that’s honest about its branding (and lets you control it), you might like Shipper.now.

FAQ: Lovable Badge

1. Can I remove Lovable badge only on selected pages?

Yes — but only if you’re on a paid plan. Free users can’t access Code view, so the badge will always show. On paid plans, you can either:

• Ask Lovable’s AI assistant to add CSS that hides the badge
• Or go into Code view yourself and add a CSS rule in index.html that stops it from displaying

Keep in mind: the badge isn’t truly deleted — it’s still in the code, just hidden from view.

2. Can I remove Lovable logo for free?

No — if you’re on the free plan, the Lovable badge/logo is always shown. Free users don’t get access to Code view, so there’s no way to hide or edit it yourself. The only way to remove the branding is by upgrading to a paid plan.

3. What’s better than Lovable?

Lovable is great for getting started, but some people find the forced branding and limited customization frustrating. If you want full control over your app (no watermark, no “Edit with Lovable” badge, and code you can actually edit), tools like Shipper.now.

→ Learn how to cancel Lovable