How to Hide the “Edit with Lovable” Badge for Free

Lovable adds a small “Edit with Lovable” badge to your published site. Hiding it usually requires a Pro plan, but there’s a simple way to remove it for free.

Option 1: Ask Lovable to Hide It

Use this prompt inside Lovable’s AI assistant:

“Add to the CSS to globally hide anything with the ID lovable-badge”

This will update the global styles for you.

Option 2: Do It Manually

If you’d rather do it yourself, open src/index.css and add this inside your @layer base:

@layer base {
  /* ...the rest of your base...*/
  #lovable-badge {
    display: none !important;
  }
}

That’s all you need. The badge will no longer appear on your site, even without a Pro subscription.