# Custom CSS for Cookie Banner | Secure Privacy Guide

> [CMP v1] Learn how to add or replace custom CSS for your Secure Privacy cookie consent banner — paste your styles into the CSS box, choose whether to override or replace default styles, and save in a few steps.

- Canonical: https://support.secureprivacy.ai/article/cmp-v1-how-to-change-the-css-of-your-cookie-consent-banner
- Product: Consent Management
- Category: Secure Privacy Legacy
- Published: 2026-03-06T12:44:00+00:00
- Updated: 2026-03-22T20:46:23.785+00:00
- Reading time: 2 minutes

---

Secure Privacy supports full **custom CSS** for your cookie consent banner — allowing you to override default styles or apply a completely new stylesheet to match your website's branding. This guide explains how to add, replace, and manage custom CSS for your banner in a few steps.

## Who Is This For?

-   Web developers customizing the appearance of the Secure Privacy cookie consent banner with CSS
    
-   Website administrators applying custom fonts or styles to the cookie banner to match their brand
    
-   Designers replacing the default banner CSS with a fully custom stylesheet
    

## How to Add Custom CSS to Your Cookie Consent Banner

![Secure Privacy Banners settings showing the Add Custom CSS text box and Replace Default CSS option](https://pub-7bd19505838640d0a08ef1bd6ec3fb9b.r2.dev/articles/f890bdb9cd6945de72ff-3583354f9162.webp)

1.  In your Secure Privacy dashboard, navigate to **Banners > Cookie Banner > Add Custom CSS**.
    
2.  Paste your CSS into the CSS text box provided.
    
3.  If you want to completely replace the default banner CSS with your own stylesheet, check the **Replace Default CSS** option. Leave this unchecked if you only want to override specific properties.
    
4.  Click **Save**.
    
5.  Your CSS will be applied to the cookie banner immediately.
    

## Important Notes

-   **Overriding specific properties:** If you only want to change a few styles — such as colors, font size, or button radius — leave **Replace Default CSS** unchecked. Your custom CSS will be added on top of the existing default styles, applying only the properties you have specified.
    
-   **Replacing all CSS:** Check **Replace Default CSS** only when you are supplying a completely new stylesheet for the banner. This removes the default styles entirely and applies only your custom CSS.
    
-   **Importing external stylesheets and fonts:** You can use `@import` inside the CSS text box to load external stylesheets or web fonts — for example, importing a custom font from Google Fonts or your own CDN.
    

## Frequently Asked Questions

### What is the difference between adding custom CSS and replacing the default CSS?

Adding custom CSS without checking Replace Default CSS applies your styles on top of Secure Privacy's default banner styles — useful for changing specific properties like colors or padding. Checking Replace Default CSS removes all default styles and applies only your custom stylesheet — use this when you want complete control over the banner's appearance from scratch.

### Can I use @import to load custom fonts in the cookie banner?

Yes. Add your `@import` statement at the top of the CSS text box to load an external font or stylesheet. For example, you can import a Google Font to use in the banner — just ensure the font URL is allowed by your website's Content Security Policy.

### Will custom CSS affect the cookie banner across all pages of my website?

Yes. Custom CSS applied in the Banner Settings is loaded as part of the Secure Privacy script and applies to the cookie banner on every page where the script is active.

## See Also

-   [Secure Privacy Pricing Plans Overview](https://support.secureprivacy.ai/article/secure-privacy-pricing-plans--consent-management-platform)
    
-   [Website Visits vs Page Views vs Consent Explained](https://support.secureprivacy.ai/article/website-visits-vs-page-views-vs-consent-explained)
    
-   [Secure Privacy Volume Discounts | Custom Consent Storage Pricing](https://support.secureprivacy.ai/article/secure-privacy-volume-discounts--custom-consent-storage-pricing)