How to Hide the reCAPTCHA v3 Badge Without Breaking It

You can hide the reCAPTCHA badge. Google allows it. But there’s a catch that most tutorials skip: you have to replace it with visible attribution text, or you’re in breach of the reCAPTCHA Terms of Service. This guide covers the CSS that works, the exact wording Google asks for, and how to confirm v3 is still scoring your traffic afterwards.

Why the badge shows up at all

reCAPTCHA v3 has no checkbox and no image puzzle. It scores visitors quietly in the background. That floating badge in the bottom-right corner is the only sign your site is running it, and that’s the point. The badge is how Google discloses the data collection to your users.

Inspect it and you’ll find a wrapper carrying inline styles like these:

<div class="grecaptcha-badge" data-style="bottomright" style="
  width: 256px;
  height: 60px;
  position: fixed;
  visibility: visible;
  right: -186px;      /* collapsed, only the 70px logo sticks out */
  bottom: 14px;
  box-shadow: gray 0px 0px 5px;
  transition: right 0.3s ease 0s;
"></div>

That right: -186px trips people up more than anything else about the badge, and it’s not a bug. The badge is 256px wide, and Google parks 186px of it off-screen so only the logo tile peeks out. Hover over it and a transition slides it back to right: 0 to reveal the full panel.

The important detail is that these are inline styles. A plain right: -256px rule in your stylesheet loses the specificity fight, which is why so many attempts to move the badge quietly do nothing.

What Google’s terms actually say

Google’s reCAPTCHA FAQ permits hiding the badge on one condition:

You are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow.

In practice: if the badge is hidden, attribution has to be visible on every page or form where reCAPTCHA runs. Not tucked into your privacy policy. Not inside a collapsed footer accordion. Visible, in the flow, where the user actually is.

Sites that hide the badge without attribution risk having their site key disabled. That’s a real enforcement mechanism, not a theoretical one, so it’s worth thirty seconds of your time.

Step 1: hide the badge with CSS

Use visibility: hidden, not display: none. Setting display: none pulls the element out of the layout tree entirely, and that has caused the reCAPTCHA script to misbehave in certain browser and script-load combinations. Visibility keeps the box measurable while making it invisible.

/* Hide the reCAPTCHA v3 badge.
   Google's inline styles set visibility: visible, so !important
   is genuinely required here. */
.grecaptcha-badge {
    visibility: hidden !important;
}

If you only want it gone on certain pages, scope it instead of going global:

/* Only hide the badge on checkout and contact. */
body.page-checkout .grecaptcha-badge,
body.page-contact .grecaptcha-badge {
    visibility: hidden !important;
}

Step 2: add the attribution

Drop this in right below the submit button on every form that uses reCAPTCHA. Both links are required. Plain text without them doesn’t satisfy the condition.

<p class="recaptcha-terms">
  This site is protected by reCAPTCHA and the Google
  <a href="https://policies.google.com/privacy">Privacy Policy</a> and
  <a href="https://policies.google.com/terms">Terms of Service</a> apply.
</p>

Small print is fine, but keep it readable. The requirement is that it’s visible, and 8px grey text on a grey background won’t hold up if anyone looks:

.recaptcha-terms {
    font-size: 0.8rem;
    line-height: 1.4;
    color: #6b7280;
    margin-top: 0.75rem;
}

Step 3: check that v3 still runs

Hiding the badge shouldn’t affect token generation, but confirm it rather than hope. Open the console on your page and ask for a token by hand:

// Paste into the browser console on your own page.
// A healthy v3 setup returns a long token starting with "03A".
grecaptcha.ready(function () {
    grecaptcha
        .execute("YOUR_SITEKEY", { action: "verify" })
        .then(function (token) {
            console.log("token length:", token.length);
            console.log(token.slice(0, 24) + "...");
        });
});

Get a token back and your CSS hasn’t broken anything. If it throws grecaptcha is not defined, the reCAPTCHA script never loaded in the first place and the badge had nothing to do with it. You can compare against a known-good setup on our live reCAPTCHA v3 demo page.

One caveat worth knowing: a token proves the script ran, not that your score is healthy. Hiding the badge has no bearing on scoring, but plenty of other things do. Low scores are a separate problem with a separate fix.

What not to do

Approach	Why it fails
display: none	Removes the element from layout. Has caused inconsistent behaviour across browser and script-load combinations.
opacity: 0 with no attribution	Still a terms breach. Invisible is invisible, whichever property got you there.
Deleting the node with JavaScript	The script may re-inject it, and you’ve added a race condition for nothing.
Attribution only in the privacy policy	Google asks for it visibly in the user flow, not buried a page away.
z-index: -1	Pushes the badge behind other elements unpredictably. On pages with no background it can still show.

Frequently asked questions

Does hiding the badge lower my reCAPTCHA v3 score?

No. The score comes from user behaviour and browser signals, not from whether the badge is on screen. Hiding it changes nothing about how a request gets evaluated.

Can I move the badge instead of hiding it?

Yes, and it’s the safer option if placement is your only gripe. Set data-badge="bottomleft" or data-badge="inline" on your reCAPTCHA element. With inline you position the container yourself, and because the badge stays visible you don’t need the attribution text.

Does this apply to reCAPTCHA v2?

Only to invisible v2. The v2 checkbox widget is its own disclosure, so there’s no separate badge to deal with. Invisible v2 shows the same floating badge as v3 and follows the same rules. Our guide to what reCAPTCHA is and how it works covers the differences between versions.

Will Google actually enforce this?

Site keys can be disabled for terms violations. It’s uncommon for low-traffic sites, but the attribution snippet takes half a minute to add, so there’s no real reason to carry the risk.

Summary

Hide the badge with visibility: hidden !important, add the attribution paragraph with both Google links under your submit button, then confirm token generation still works in the console. That’s the whole compliant path, and it takes about five minutes.

If you’re working with reCAPTCHA v3 in code rather than just styling it, CapSkip is a local captcha solver that runs on your own machine and returns tokens through the API you already use. Our reCAPTCHA v3 solver page has the integration details.