Skip to content
Start free Sign in

Cookie banner customisation

Your banner, in your colours.

You set the colours, wording and layout of your Kukie.io consent banner and see every change in a live preview, so it looks like part of your site before any visitor sees it.

Start free (opens in a new tab) See pricing

Watch the walkthrough

Style it, check it, save it.

Watch one site's banner take on its colours, font, corners and layout in Banner Editor, with every change in the live preview first.

2 minutes 37 seconds, narrated, with captions in the player. The sites and rules in it are examples.

Read the transcript
  1. 0:00 Your cookie banner is the first thing visitors see. With Kukie.io, it can look exactly the way you want: your colours, your font, your corners, your layout.
  2. 0:12 You style it in the Banner Editor, and every change appears in a live preview. Nothing reaches your visitors until you save.
  3. 0:22 Start with the colours: primary, background, text and button text. Each one takes a hex or RGB value, or a CSS variable from your own stylesheet. So when your brand colour changes, the banner follows.
  4. 0:36 Or choose Inherit from Website. The banner finds your accent colour by itself, from your theme colour tag or the brand variables your theme already sets.
  5. 0:46 Use the visitor's system fonts, or the font your site already loads. Then set two corner radii, one for the banner and one for the buttons, so a square card can carry round buttons.
  6. 0:57 Every button can have its own background, text and border colours, each with a hover state, plus a border width and a text weight.
  7. 1:06 Pick a layout: a popup, a bar at the top or bottom, or a floating card in the corner you choose. Decide which button sits left, middle and right. On phones, they stack in the same order. And choose what appears at all, from the close button to your policy links.
  8. 1:23 On paid plans, put your own logo next to the title. And for anything the settings don't reach, add custom CSS. It applies inside the banner only.
  9. 1:33 That's because the banner lives in its own sealed layer. Your stylesheet can't restyle it, and it can't restyle your page. So a theme update leaves it exactly as you approved it.
  10. 1:44 The variants take care of themselves. Auto Dark Mode switches to a dark palette when the visitor's device is dark. Arabic and Hebrew mirror the whole layout, buttons included. And Auto-Translation covers more than 70 languages.
  11. 1:59 The preferences modal takes your style too, with its own width, button layout, order and colours. And the button that reopens the banner can be an icon, a pill or a tab, with six icons to choose from, in any corner.
  12. 2:13 One part stays yours to check: text that's easy to read. Watch the preview, keep the contrast strong, then save.
  13. 2:25 Colours, dark mode and the live preview are on every plan, including Free. Kukie.io. Your banner, in your colours.

Why it matters

Visitors meet the banner first.

For the first few seconds of a visit, the consent banner is the only thing on the page a visitor can use.

If it arrives in another typeface, another blue and another corner radius, you ask a stranger for permission while looking like a stranger yourself.

  • Left as it came

    The banner is visibly someone else's

    • Colours that belong to the vendor rather than to you, because nobody changed the defaults.
    • Styling injected into your page, so the banner inherits half of your theme and none of the rest.
    • A layout that shifts, a button in the wrong place or a panel behind your sticky header.
    • A design you check again after every theme update, because the last one moved it.
  • Part of your site

    The banner is visibly yours

    • Your background, text and button colours, and your own logo next to the title on the Pro, Agency and Unlimited plans.
    • Styling kept apart from your page, so your stylesheet and the banner's do not restyle each other.
    • The same look on every template, from the homepage to a checkout step to a blog post.
    • A theme update that changes your site and leaves the banner where you put it.

Appearance is not what makes a consent banner lawful. What it changes is whether the first thing a visitor meets on your site looks as if you put it there on purpose.

In Banner Editor

What you can change.

You set the look in Banner Editor and check it in a live preview before anything reaches your visitors.

  • Colours from your stylesheet

    Every colour field takes a HEX or RGB value or a CSS variable from your own stylesheet, so a later change to your brand colour reaches the banner too.

  • Your colours, or your site's

    Custom Colours uses what you set. Inherit from Website takes the primary colour from your site, from its theme colour or common brand variables.

  • Your site's font

    The visitor's system fonts, or the font your site already loads, so the banner reads in your typeface.

  • Two corner radii

    One radius for the banner and the preferences modal, one for the buttons, so a square card can carry round buttons.

  • Every button, in detail

    Background, text and border colours for each button, each with a hover state, plus border width and text weight.

  • Order and layout

    Which button sits left, middle and right, and a popup, top bar, bottom bar or floating card in the corner you pick.

What you can customise on the Kukie.io consent banner, and which plans include it
You can change What that covers Available on
Colours and fonts Primary, background, text and button text colours, Custom Colours or Inherit from Website, and system fonts or your site's font Every plan
Buttons and corners Colours with hover states, border width and text weight for each button, and separate radii for the banner and the buttons Every plan
Dark appearance Follows the visitor's device setting with Custom Colours and Auto Dark Mode, both on by default, with an automatic or a custom dark palette Every plan
Layout and order Popup, top bar, bottom bar or a floating card in one of four positions, the button order, and whether Reject All, Customise, a close button and the policy links appear Every plan
Wording Heading, body text and button labels in each language you add, plus built-in text in 70+ languages when you turn on Auto-Translation Every plan
Preferences modal and reopen button The modal's width, button layout, overlay, texts and colours, and the corner, style, icon and colours of the button that brings the banner back Every plan
Your logo Shown next to the banner title, with its size and corner radius The Pro, Agency and Unlimited plans
Custom CSS Styling beyond the built-in options, applied inside the banner only The Pro, Agency and Unlimited plans

The 4 layouts are as much a consent decision as a visual one: a popup asks for an answer, a bar lets the page carry on. The cookie banner page sets out which to pick and why.

Learn more about banner layouts

What stays the same

What stays fixed, and why.

Some of what a banner does is a consent decision rather than a styling one, so it stays the same however you style it.

  • The wall around the banner

    Not a setting

    Style isolation is not a setting you can switch off. Your stylesheet does not restyle the banner, the banner's does not restyle your page, and that holds however far you take the customisation.

  • Right-to-left, whenever the language needs it

    Not a setting

    Whenever the banner shows a right-to-left language such as Arabic or Hebrew, it mirrors itself. It is not a per-site option you can forget to turn on, and your colour choices cannot break it.

  • The consent controls

    Not a setting

    Which controls appear, what they do and how a refusal is honoured are consent decisions. They belong to the banner settings and the region rules, not to the colour picker.

    Learn more about banner settings

  • Keyboard and screen reader behaviour

    Not a setting

    The banner is designed against WCAG 2.2 AA, and how it works from the keyboard and with a screen reader does not change with your colours. Contrast is the part your choices can undermine, which is why the workflow below checks it.

    Learn more about banner accessibility

One more item follows your plan rather than your stylesheet: the small 'Powered by Kukie.io' line in the banner. There is a page about what that line means for visitors who select it.

The workflow

Pick colours you will not have to undo.

The live preview is the whole workflow. It draws the banner as you edit, at the size and on the background it will be used at. Your visitors keep seeing the current banner until you save.

  1. Step 1

    Step 1: Take the colours from the site, not the logo

    The colours that make the banner feel native are the ones already at 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. Step 2

    Step 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 the previous version.

  3. Step 3

    Step 3: Check the text is still readable

    This is the one way a colour choice can damage the banner. Pale text on a pale background passes a brand review and fails a contrast one, and a banner that cannot be read cannot be refused. Banner Editor measures each colour pair as you pick it, including any dark mode colours you set, and says under the field which one falls short and what to change. It never changes your colours: they are yours, and so is that part of the responsibility.

  4. Step 4

    Step 4: Save, and it goes live

    Until you save, nothing changes for anybody visiting your site. New visitors get the change once your site's banner file is rebuilt, and a returning visitor's browser can keep the previous version for up to 24 hours. Change your mind next month and the loop is the same.

Variants

The versions you never design twice.

Most of the work in styling a consent banner is the variants: the dark one, the mirrored one and the translated ones.

Kukie.io derives the dark and mirrored versions from what you have set, and Auto-Translation supplies the translated ones when you turn it on.

  • The dark version

    With Custom Colours, the colour mode every site starts with, Auto Dark Mode switches the banner to a dark palette when a visitor's device is in dark mode. You can keep the automatic palette, pick its colours yourself or turn it off.

    Choose Inherit from Website instead and the banner takes its colours from your site, with no separate dark mode.

  • The mirrored version

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

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

  • The translated versions

    Turn on Auto-Translation and the banner shows its built-in text in 70+ languages, chosen from the page language or the visitor's browser language.

    Wording you write yourself is never machine-translated: add it in each language you want, and Kukie.io shows it as you wrote it.

Beyond the first layer

The preferences modal and the reopen button.

A visitor who chooses Customise, or comes back later to change their mind, sees two more surfaces. Both take your styling too.

In the Preferences modal tab

  • A width from 320 to 1200px on desktop, 600px unless you change it; on phones it fills the screen
  • Its three buttons in one row or stacked, in the order you choose, in the banner's colours or its own
  • Its own background overlay, title icon, title and description in each language, and the policy links

In the Behaviour tab

  • A reopen button as an icon, a pill with text or a tab, with 6 icons, in any corner and up to 200px in from each edge
  • Your own text and colours for it, with an icon colour picked for contrast
  • Pages where the banner and its reopen button stay hidden, while consent keeps being enforced there

When it matters most

Where a matching banner matters most.

Every site gains from a banner that does not look imported. In these cases 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 for each client is a few minutes of colour work.

    Learn more about Kukie.io for agencies

  • Your site has a dark theme

    A white banner on a dark page is the most obvious sign that a consent tool was added afterwards. Setting the background and text colours fixes it in one pass, and the automatic dark palette covers visitors whose own device is set to dark.

  • Your audience reads right to left

    A banner translated into Arabic that still runs left to right tells visitors nobody checked. Mirroring happens by itself, 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. The banner takes no part in your stylesheet, so none of that reaches it: the banner you approved stays the one your visitors see until you change it.

Questions about customisation

Can I change the colours of the cookie banner?
Yes. You set the background, text and button colours, and a live preview shows the result while you edit, so you choose against the banner itself rather than a hex code. A colour can be a HEX or RGB value or a CSS variable from your own stylesheet, such as var(--brand), so the banner follows your brand colour when it changes. Colour settings are on every plan, including Free, and nothing reaches your visitors until you save.
Can I put my own logo on the cookie banner?
Yes, on the Pro, Agency and Unlimited plans. Your logo appears next to the banner title, which is usually the quickest way to make the banner read as part of your site rather than something a third party placed on top of it. Colour settings, dark mode, right-to-left layouts and the live preview are on every plan.
Can I style a cookie consent banner with custom CSS?
Yes, on the Pro, Agency and Unlimited plans. Custom CSS covers what the built-in colour settings do not reach. It applies inside the banner rather than to your page, so a rule you write for the banner cannot escape and change 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?
Not the Kukie.io banner. It keeps its styles apart from the styles on your site: your stylesheet does not restyle the banner, and the banner's stylesheet does not restyle your layout. The one thing it adds to your page is a small stylesheet for the placeholders that stand in for blocked embeds. This is worth checking with any consent tool, because a banner that injects its styles straight into the page competes with your theme for the same elements.
Does the cookie banner support dark mode?
Yes. With Custom Colours, the colour mode every site starts with, Auto Dark Mode switches the banner to a dark palette when the visitor's device is in dark mode. It is on by default, you can keep the automatic dark palette or pick its colours yourself, and you can turn it off. If you choose Inherit from Website instead, the banner takes its colours from your site and has no separate dark mode.
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 switches flip with them, so the banner reads the way the rest of the page reads for that visitor. With Auto-Translation on, it follows the visitor's language, so there is nothing to set up per language.

Make the banner look like your site.

Set your colours, check the live preview and save. Colour settings, dark mode and the preview are on every plan, including Free.

Start free (opens in a new tab) See pricing

Related features

Appearance is one layer. These pages cover what the banner does, who can use it and how fast it loads.

See all features

More on banner design and wording

Writing the copy, placing the banner and the design choices to avoid.

See all articles

Disclaimer

Kukie.io provides tools to collect and record consent. It is not legal advice, and using it does not by itself make a website compliant with any law.

Listed on

Kukie.io on Trustpilot (opens in a new tab) Kukie.io on G2 (opens in a new tab) Kukie.io on SaaSHub (opens in a new tab) Kukie.io on AlternativeTo (opens in a new tab)