Consent experience

Customise your cookie banner
so it looks like part of your site

Cookie banner customisation means styling the consent notice so it looks like part of your site rather than a third-party overlay. Kukie lets you set background, text and button colours, add your own logo and custom CSS on paid plans, and watch every change in a live preview before a single visitor sees it.

Start free → See what the banner does

What does a bolted-on banner cost you?

For the first few seconds of a visit, the consent notice is the only thing on the page a visitor can interact with. If it arrives in a different typeface, a different shade of blue and a different corner radius from everything around it, it reads as something bought in rather than something you decided. You are asking a stranger for permission in the same moment, which is a poor time to look like a stranger yourself.

Bolted on

The banner is visibly someone else's

Colours that belong to the vendor rather than to you, because the defaults were never changed.
A notice whose styling is injected into your page, so it inherits half of your theme and none of the rest.
A layout that shifts, a button that lands in the wrong place, or a panel that sits behind your sticky header.
A design you have to check again every time your theme is updated, because the last update moved it.

Part of the site

The banner is visibly yours

Your background, text and button colours, and your own logo in the header on paid plans.
Styling that is sealed off from your page, so nothing is inherited by accident in either direction.
The same appearance on every template, from the homepage to a checkout step to a blog post.
A theme update that changes your site and leaves the consent notice exactly where you put it.

Appearance is not what makes a consent notice lawful. Kukie supplies the technical infrastructure for consent management, and whether your site is compliant depends on how you configure it and may need additional legal measures specific to your organisation. What appearance changes is whether the first thing a visitor meets on your site looks like it was put there on purpose.

Why can't your site's CSS reach the banner?

Kukie renders the entire banner inside a Shadow DOM. That is a browser feature, not a Kukie invention: it creates a sealed compartment inside a web page, and styles do not cross the wall in either direction. It is the least visible thing on this page and the one most worth understanding, because it decides how much of your time this feature will ever take.

Nothing gets in

A global rule on your site that styles every button, a CSS reset, a framework that sets a base font size, a plugin that decides all links are underlined: none of it reaches inside the banner. The notice renders identically on a WordPress theme, a Shopify theme and a hand-built site, because it is not participating in any of them.

That is also why the preview you approve is the banner your visitors get. There is no second rendering, on a page you did not test, where the theme quietly wins.

Nothing gets out

The reverse matters more than people expect. A consent banner that writes its styles into your page is a third party editing your design, and the symptoms are hard to trace back: spacing that changed on one template, a heading that is suddenly the wrong weight, a layout that moves when the banner appears.

Because the banner's CSS is contained, installing Kukie cannot restyle anything of yours. There is nothing to undo, and no selector to go hunting for.

The one deliberate door through the wall

Isolation would be a cage if there were no way in, so there is one. Custom CSS, available on paid plans, is applied inside the banner rather than to your page. It is how you reach the details the built-in colour settings do not cover, and it keeps the same guarantee in the other direction: a rule you write for the banner still cannot escape into the rest of your site. How the script that carries all of this is delivered, and why it does not slow your pages down, is covered on the performance page.

What can you change, and what stays fixed?

Worth knowing before you start, because the second list is the more useful one. Some of what a consent banner does is deliberately not a styling decision.

What you can change

What can be customised on the Kukie cookie banner, and which plans include it
You can change	What that covers	Available on
Colours	Background, text and button colours across the notice	Every plan
Dark appearance	Follows the visitor's system setting while you keep the default colours	Every plan
Wording	Heading, body text and button labels, written once and translated automatically	Every plan
Layout	Which of the four banner layouts the notice uses	Every plan
Your logo	Shown in the banner header, so the notice carries your mark	Paid plans
Custom CSS	Styling beyond the built-in options, applied inside the banner	Paid plans

The four layouts are as much a consent decision as a visual one, so which to pick and why is set out on the cookie banner page. Your own logo and custom CSS come with the paid plans; everything else in the table is on every plan, including the free one. Compare plans.

What stays the way it is

The wall around the banner

Style isolation is not a setting you can switch off, and there is no reason to want to. Your CSS stays out, the banner's CSS stays in, and that holds however far you take the customisation.

Right-to-left, decided by the visitor

A visitor reading in Arabic or Hebrew gets a mirrored banner automatically. It is not a per-site option you can forget to turn on, and it is not something your colour choices can break.

The consent controls themselves

Which controls appear, what they do and how a refusal is honoured are consent decisions rather than styling ones. They belong to the banner, not to the colour picker.

Keyboard and screen reader behaviour

The banner is built against WCAG 2.1 AA and stays that way whatever you restyle. Colour is the one part of the appearance you can genuinely undermine, which is the next section. See accessibility.

One more thing that is a plan matter rather than a CSS one: the small Kukie attribution in the banner. Whether it appears is decided by your plan, not by a stylesheet. There is a page about what that attribution is for visitors who click it.

Choosing colours you will not have to undo

The live preview is the whole workflow. It renders the banner as you edit, so you are never guessing what a hex value will look like at the size and against the background it will actually be used at. Nothing you are looking at is public: your visitors keep seeing the current banner until you save.

1

Take the colours from the site, not from the logo

The colours that make the banner feel native are the ones already doing work on your pages: your button colour, your body text colour, your card background. A logo palette is often more saturated than anything on the live site, and a banner built from it stands out rather than settles in.
2

Watch the preview, not the swatch

A colour that looks confident in a picker can look grey behind a paragraph of small text. Change one value at a time and read the preview after each change; it is faster than saving, reloading your own site and trying to remember what the previous version looked like.
3

Check the text is still readable

This is the one way a styling choice can damage the banner. Pale text on a pale background passes a brand review and fails a contrast one, and a notice that cannot be read cannot be refused. Everything else about the banner is built against WCAG 2.1 AA; the colours are yours, and so is that part of the responsibility.
4

Save, and that is the moment it goes live

Up to here nothing has changed for anybody visiting your site. Saving is the publish step, and the next visitor sees what you approved in the preview. Change your mind next month and the loop is the same one.

Three things you never design a second version of

Most of the work in customising a consent banner is not the first version. It is the variants: the dark one, the mirrored one, the translated ones. Kukie derives all three from what you have already set.

The dark version

Leave the colours at their defaults and the banner follows each visitor's own system light or dark preference. Someone browsing at night gets a dark notice without you maintaining a second palette.

Set your own colour source and the banner uses yours instead, on the reasoning that a colour you chose deliberately should outrank an operating system setting.

The mirrored version

For a right-to-left language such as Arabic or Hebrew, the banner mirrors its layout rather than merely swapping the words. Text aligns right, the buttons reverse their order, and the toggle switches flip to match.

A translated notice laid out left-to-right reads as obviously machine-made. A mirrored one reads like the rest of the page.

The translated versions

You write the heading, the body and the button labels once. Translation into 70+ languages happens from there, which is what makes customising the wording a ten-minute job rather than a translation project.

Rewrite a sentence six months later and you are still editing one thing, not seventy.

When does cookie banner branding matter most?

Every site benefits from a notice that does not look imported. These are the cases where it stops being cosmetic.

You build sites for other people

A client who paid for a design notices a foreign-looking box on their homepage within a day, and it is your phone that rings. Matching the banner per client is a few minutes of colour work; how to run that across a portfolio is covered under agencies and teams.
Your site has a dark theme

A white notice on a dark page is the single most obvious tell that a consent tool was added afterwards. Setting the background and text colours fixes it in one pass, and the automatic dark behaviour covers the visitors whose own device is set to dark.
Your audience reads right-to-left

A banner that has been translated into Arabic but still runs left-to-right signals that nobody checked. Mirroring is automatic here, so this is one variant you get without asking for it.
Your theme changes more than once a year

Redesigns, plugin updates and framework upgrades all rewrite CSS underneath you. Because the banner does not participate in your stylesheet, none of that reaches it: the notice you approved stays the notice your visitors see until you decide otherwise.

Colour theming, automatic dark mode, right-to-left support and the live preview are part of every plan, including the free one. Your own logo in the banner header and custom CSS come with the paid plans. Compare plans, or add a site and start with the colours.

Features next to this one

Appearance is one layer. These are the pages for what the banner does, who can use it and how fast it arrives.

Cookie banner

Layouts, categories and consent modes

Accessibility

Built to WCAG 2.1 AA guidelines

Performance

Async, CDN, no round-trips

See the full feature set

Customisation questions

What site owners ask before they open the colour picker.

Can I change the colours of the cookie banner?

Yes. The background colour, the text colour and the button colours are all yours to set, and a live preview shows the result while you are still editing, so you are choosing against the actual banner rather than against a hex code. Colour theming is available on every plan, including the free one. Nothing reaches your visitors until you save.

Can I put my own logo on the cookie banner?

Yes. A logo of your choosing can be shown in the banner header, which is usually the quickest way to make the notice read as part of your site rather than as something a third party has dropped on top of it. The custom logo is a paid-plan feature. Colour theming, dark mode, right-to-left support and the live preview are not, and are available on every plan.

Can I style a cookie consent banner with custom CSS?

Yes, on paid plans. Custom CSS covers the cases the built-in colour settings do not reach. It is applied inside the banner rather than to your page, so a rule you write for the banner cannot escape and affect the rest of your site. If the built-in options already do what you want, you do not need it.

Will a cookie banner break my website design?

Kukie renders the whole banner inside a Shadow DOM, which is a sealed compartment inside the page. Styles do not cross that boundary in either direction: your site CSS cannot reach in and distort the banner, and the banner CSS cannot leak out and move your layout. This is worth checking with any consent tool, because most of them inject their styles straight into the page and then compete with your theme for control of the same elements.

Does the cookie banner support dark mode?

Yes. If you leave the colours at their defaults, the banner follows the visitor system light or dark preference on its own, so there is no second theme for you to maintain. If you set your own colour source, the banner uses your colours instead, on the reasoning that a brand colour chosen deliberately should not be overridden by an operating system setting.

Does the banner work for right-to-left languages such as Arabic and Hebrew?

Yes, and it does more than translate the words. For a right-to-left language the banner mirrors its layout: text aligns to the right, the buttons reverse their order and the toggle switches flip with them, so the notice reads the way the rest of the page reads for that visitor. It follows the visitor language automatically, so there is nothing to set up per language.

Make the consent banner look like your site

Free plan, no card required. Set your colours, watch the preview, save.

Start Free → View pricing

Customise your cookie banner
so it looks like part of your site

What does a bolted-on banner cost you?