Discord Custom Badge Hider (Vencord / BetterDiscord)

A collection of lightweight, client-side Custom CSS snippets to completely hide specific profile badges on Discord.

How I Figured This Out

Discord frequently updates its backend layout obfuscation, meaning randomized class names like .badge__8061a break constantly.

I dove deep into the HTML elements using Developer Tools to find a permanent workaround. Instead of relying on volatile class names, I figured out that we can target the accessibility aria-label attributes directly. Because Discord uses these labels for screen readers, they stay consistent across client updates—meaning this CSS won't break next week.

Installation

1. Open your Discord settings.
2. Navigate to your client mod's custom CSS section (e.g., Vencord Settings > Custom CSS).
3. Copy and paste the snippets for the badges you want to hide into the editor.
4. Save and reload Discord (Ctrl + R or Cmd + R).

The Snippets

Hiding Specific Badges

Here are the snippets I've put together so far. Copy whichever ones you want to remove from your view:

/* Hide "Completed a Quest" Badge */
a[aria-label="Completed a Quest"] {
    display: none !important;
}

/* Hide "Level 100 Reached" Badge */
a[aria-label="Level 100 Reached"] {
    display: none !important;
}

/* Target and hide ALL tiers of the Gifting badge using a wildcard attribute selector */
a[aria-label*="Gifting"] {
    display: none !important;
}

Want to remove your hypesquad badge permanently? Check out the repo below.

https://github.com/sshkitty/remove-hypesquad