# Custom CSS for Consent Experiences (/docs/consent-management/configuration/consent-experiences/custom-css-for-consent-experiences)

Custom CSS lets you load an external stylesheet alongside a Consent Experiences theme. Use it when the Theme Editor controls are not enough and you need finer visual overrides.

When Custom CSS is enabled, Transcend also pins your Consent Manager UI version. That keeps the look and structure of the consent UI stable, so your custom styling does not break when Transcend ships new Consent Manager UI releases.

This guide applies only to Consent Experiences. For the legacy banner stylesheet, see [Configuring the Pre-Built Consent Experience UI](../consent-ui/configuring-the-ui.mdx).

#### Prerequisites [#prerequisites]

Before you configure Custom CSS:

1. Enable Consent Experiences. See [Enabling Consent Experiences](./enabling-consent-experience.mdx) 
2. Confirm your airgap.js version is at least `9.0.0`. Custom CSS requires a Consent Manager UI version that is compatible with your airgap.js version.
3. Host your stylesheet on a URL your visitors can reach. Prefer HTTPS for production.

If you do not see **Use Custom CSS** under Developer Settings > Visual Editor after Consent Experiences is enabled, contact Transcend Support to enable Custom CSS for your organization.

#### Enable Custom CSS and pin the Consent Manager UI version [#enable-custom-css-and-pin-the-consent-manager-ui-version]

1. In the Admin Dashboard, go to **Consent Management** > **Developer Settings**.
2. Open the **Visual Editor** tab.
3. Confirm **Use New Consent Experience** is on.
4. Toggle on **Use Custom CSS**.
5. Choose a **Consent Manager UI version** from the dropdown. Transcend pins that version line so automatic updates cannot change the consent UI structure your custom styling depends on without your approval.
6. Review the Consent Manager UI changelog shown under the toggle so you know what changed in each version.
7. Click **Review Changes & Publish** and publish your airgap bundle.

Turning **Use Custom CSS** on pins a Consent Manager UI version. Turning it off clears the pin and returns you to automatic Consent Manager UI updates for your airgap.js version.

If your pinned Consent Manager UI version is incompatible with your current airgap.js version, the Admin Dashboard blocks deploy until you update airgap.js or choose a compatible Consent Manager UI version.

#### Add a stylesheet URL to a theme [#add-a-stylesheet-url-to-a-theme]

After Custom CSS is enabled, each theme can link its own stylesheet.

1. Go to **Consent Management** > **Consent Experiences**.
2. Open the **Themes** tab and select the theme you want to customize (or create a new theme).
3. Open **General Settings** in the theme editor side panel.
4. Under **Custom CSS URL**, enter the **Stylesheet URL** for your hosted CSS file (for example, `https://example.com/custom-theme.css`).
5. Click **Save Changes**.
6. Click **Review Changes & Publish** and publish your airgap bundle so the live consent UI loads the stylesheet.

You can set a different stylesheet URL per theme. Themes without a URL continue to use Theme Editor styling only.

Browsers block HTTP stylesheets on HTTPS sites by default. Use HTTPS before deploying to production.

#### How version pinning works [#how-version-pinning-works]

When Use Custom CSS is **OFF**, Transcend keeps your Consent Manager UI up to date automatically for your airgap.js version.

When Use Custom CSS is **ON**:

- You choose a Consent Manager UI version and stay on that version line until you change it.
- Transcend can still apply smaller fixes within that line, but it will not move you to a newer line without you updating the pin and retesting your CSS.

If you still use the legacy consent UI and would like to move to Consent Experiences using Custom CSS, review [Migrating from legacy custom CSS](./migrating-from-legacy-custom-css.mdx).