Skip to content

Documentation

Custom CSS Styling

Custom CSS Styling

Pro Plan

Last updated Mar 24, 2026

Pro Plan Feature

This feature is available on the Pro plan and above. View pricing →

For pixel-perfect control over your cookie banner's appearance, you can write custom CSS that is injected directly into the banner. This feature is available on Pro plans and above and gives you the ability to match every detail of your brand's design system.

Pro Feature: Custom CSS requires a Pro, Business, or higher plan. Upgrade from the Account & Billing page.

Adding Custom CSS

In the Banner Editor, go to the Design tab and scroll to the Custom CSS section. Enter your CSS rules in the text area. Changes take effect after you click Save.

The kk- Class Prefix

All banner elements use the kk- class prefix. Here are some commonly targeted classes:

  • .kk-banner - the main banner container.
  • .kk-title - the banner heading.
  • .kk-desc - the banner description text.
  • .kk-btn-accept - the Accept All button.
  • .kk-btn-reject - the Reject All button.
  • .kk-btn-customize - the Manage Preferences button.
  • .kk-details - the preferences modal container.
  • .kk-cat-item - each cookie category row in the preferences modal.

CSS Isolation & Specificity

The banner uses a "nuclear CSS reset" to prevent your website's styles from leaking into the banner. This reset sets all: unset !important on all banner child elements, then re-applies the intended styles with high specificity.

Because of this isolation layer, your custom CSS may need to use !important on certain properties to override the reset. The banner script also uses inline styles (via JavaScript) for critical properties like max-width, border, and display, which take the highest priority.

Tip: If a custom CSS rule does not appear to take effect, try adding !important to the property. If it still does not work, the property may be set by an inline style in the banner script - some layout-critical properties cannot be overridden by stylesheet rules.

Branding Restrictions

On plans where branding is required (Free and Pro), the "Powered by Kukie.io" footer is protected. Any CSS rules that target branding-related selectors (such as kukie-branding, kk-branding, or powered-by) are automatically stripped during save. This is enforced on both the server side and the client side.

On the Business plan, branding can be removed entirely via the "Show Branding" toggle - no CSS needed.

Example: Custom Font and Button Colours

.kk-banner {
  font-family: 'Inter', sans-serif !important;
}

.kk-btn-accept {
  background-color: #16A34A !important;
  color: #FFFFFF !important;
}

.kk-btn-reject {
  border: 2px solid #DC2626 !important;
  color: #DC2626 !important;
}

What Happens on Plan Downgrade

If you downgrade to a plan that does not include custom CSS, your CSS is preserved in the database but is no longer applied to the live banner. The Design tab shows an upgrade prompt instead of the CSS editor. If you upgrade again, your CSS is restored automatically.

Previous

Custom Logo on Banner
Was this helpful?