How to Remove the 'Made in Framer' Badge: A Simple CSS Trick

Are you on the free plan of Framer and want to remove the 'Made in Framer' badge from your project? Here's a quick and easy way to do this using just a bit of CSS.

Step 1: Create a Code Override

Create a new code override

Head to the Assets tab and create a new code override. Name it withCSS - this way you can add other CSS tricks in the future to the same file.

Step 2: Paste The Following Code

The code below will override the CSS style of the badge, ultimately disabling it.

import type { ComponentType } from "react"

export function withoutFramerBadge(Component): ComponentType {
    return (props) => {
        return (
            <>
                <style>
                    {`
                        #__framer-badge-container { display: none !important; }
                    `}
                </style>

                <Component {...props} />
            </>
        )
    }
}

Framer Labs GitHub repo

Step 3: Apply The Code Override

Select your primary canvas (usually the Desktop) and apply the code override to it.

Apply the code override

Step 4: Publish!

Now you just need to publish your project again and make sure the badge disappeared.

Why This Works?

This CSS code targets the specific element ID for the 'Made in Framer' badge and sets its display property to none. The !important attribute ensures that this rule takes over any other styles that might try to display the badge.

Stay Updated

For more tips and tricks on optimizing your Framer projects, consider subscribing to Framer Labs. You'll get the latest updates, tutorials, and design inspiration delivered straight to your inbox.

We’re offering 3 months on a Framer Pro subscription!

Simply click on the link below and use the partner25proyearly code at checkout.

Request my free Framer Pro Plan (3 months)

---