# How to Add Custom CSS to Your Cookie Consent Banner

CookieYes enables you to change the appearace of your cookie consent banner by adding custom styles to the banner using the custom CSS feature.

---

**Categories:** , 
**Published:** June 25, 2026
**URL:** https://www.cookieyes.com/documentation/how-to-add-custom-css-to-your-cookie-consent-banner/

---

In addition to the standard customisation features provided by [CookieYes](https://www.cookieyes.com/), it also enables you to add further customisation to your cookie consent banner with its custom CSS feature.
Our [setup guide](https://www.cookieyes.com/documentation/add-cookie-banner-to-website/) will help you throughout the process of setting up a cookie consent banner for your website.

> **Note:**

> Ensure you have upgraded your CookieYes account to a **Premium** plan (**Basic**, **Pro**, or **Ultimate**) to take advantage of the custom CSS feature.
>

## Adding custom CSS

By adding custom CSS in CookieYes, you could transform the default appearance and behavior of your website’s cookie consent banner. This will make your cookie banner match the overall outlook of your website.
Here’s how to add custom CSS in CookieYes:
Step 1: Sign in to your CookieYes account; or sign up here.
Step 2: Go to Cookie Banner in the left panel.
Step 3: Click Custom CSS to expand.
Step 4: Enter the custom CSS inside the code box as shown below. Click Publish Changes to save your settings.

![](https://assets.cookieyes.com/css_e40e445581.jpg)

```
[object Object],[object Object]
```

![](https://assets.cookieyes.com/website_with_custom_styles_CY_banner_1024x515_3fbe5fb4af.png)

Cookie consent banner set by CookieYes — before adding custom CSS

![](https://assets.cookieyes.com/website_with_custom_styles_CY_banner_1024x515_1_5fb2d84142.png)

Cookie consent banner set by CookieYes — after changing the font type and size of the banner content using custom CSS

If you have any doubts or queries regarding CookieYes, feel free to[contact support](https://www.cookieyes.com/support/).


---

## Structured Data

```json
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "Article",
      "headline": "How to Add Custom CSS to Your Cookie Consent Banner",
      "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://www.cookieyes.com/documentation/how-to-add-custom-css-to-your-cookie-consent-banner/"
      },
      "url": "https://www.cookieyes.com/documentation/how-to-add-custom-css-to-your-cookie-consent-banner/",
      "publisher": {
        "@type": "Organization",
        "name": "CookieYes",
        "url": "https://www.cookieyes.com",
        "logo": {
          "@type": "ImageObject",
          "url": "https://assets.cookieyes.com/cookieyes.png",
          "width": 250,
          "height": 60
        }
      },
      "description": "CookieYes enables you to change the appearace of your cookie consent banner by adding custom styles to the banner using the custom CSS feature.",
      "datePublished": "2020-11-02T13:21:51+00:00",
      "dateModified": "2025-06-02T06:12:57+00:00",
      "author": {
        "@type": "Person",
        "name": "CookieYes Doc Team"
      },
      "image": [
        "https://assets.cookieyes.com/cookieyes.png"
      ]
    },
    {
      "@type": "BreadcrumbList",
      "@id": "https://www.cookieyes.com/documentation/how-to-add-custom-css-to-your-cookie-consent-banner/#breadcrumb",
      "itemListElement": [
        {
          "@type": "ListItem",
          "position": 1,
          "name": "Home",
          "item": "https://www.cookieyes.com/"
        },
        {
          "@type": "ListItem",
          "position": 2,
          "name": "Documentation",
          "item": "https://www.cookieyes.com/documentation/"
        },
        {
          "@type": "ListItem",
          "position": 3,
          "name": "Customization",
          "item": "https://www.cookieyes.com/category/documentation/customization/"
        },
        {
          "@type": "ListItem",
          "position": 4,
          "name": "Banner Styling",
          "item": "https://www.cookieyes.com/category/documentation/customization/banner-styling/"
        },
        {
          "@type": "ListItem",
          "position": 5,
          "name": "How to Add Custom CSS to Your Cookie Consent Banner"
        }
      ]
    },
    {
      "@type": "WebSite",
      "@id": "https://www.cookieyes.com/#website",
      "url": "https://www.cookieyes.com/",
      "name": "CookieYes",
      "description": "CookieYes is a Google-certified consent management platform that helps businesses comply with GDPR, CCPA, and other global privacy laws.",
      "inLanguage": "en-US",
      "publisher": {
        "@id": "https://www.cookieyes.com/#organization"
      },
      "potentialAction": {
        "@type": "SearchAction",
        "target": {
          "@type": "EntryPoint",
          "urlTemplate": "https://www.cookieyes.com/?s={search_term_string}"
        },
        "query-input": {
          "@type": "PropertyValueSpecification",
          "valueRequired": true,
          "valueName": "search_term_string"
        }
      }
    },
    {
      "@type": "Organization",
      "@id": "https://www.cookieyes.com/#organization",
      "name": "CookieYes",
      "url": "https://www.cookieyes.com/",
      "logo": {
        "@type": "ImageObject",
        "@id": "https://www.cookieyes.com/#/schema/logo/image/",
        "inLanguage": "en-US",
        "url": "https://assets.cookieyes.com/cookieyes.png",
        "contentUrl": "https://assets.cookieyes.com/cookieyes.png",
        "width": 19701,
        "height": 3176,
        "caption": "CookieYes"
      },
      "image": {
        "@id": "https://www.cookieyes.com/#/schema/logo/image/"
      }
    }
  ]
}
```