Skip to content
Corner bubble

Sunrise

A warm gradient header over a clean light body.

NNorthwind SupplyAI assistant
Do you ship to Germany?
Yes — standard delivery is 3–5 working days, and free over €60.

Live preview · real tokens, not a screenshot

When to pick it

One coloured element — the header — and everything below it stays plain. A gradient behind message text hurts legibility; a gradient behind a name and an avatar does not.

How it is built

A two-stop linear gradient confined to the 56px header, with the transcript left flat. Gradients belong on chrome, not on content.

Accessibility

Header text is checked against the darkest stop of the gradient rather than its average, which is where most gradient headers fail.

Every design in this gallery states that it is an AI assistant at the start of the conversation and honours prefers-reduced-motion. Neither is configurable, because both are obligations rather than preferences.

Good fit for

  • Consumer apps
  • Marketplaces
  • Travel
  • Food delivery

Source code

Take Sunrise anywhere.

You can deploy this design through ChatBrace on any plan, including the free trial — that never changes. A paid plan also gets you the standalone HTML, CSS and JavaScript for it, to drop into a project of your own with or without ChatBrace behind it.

Seven designs ship their source to everyone, no account needed.

Other corner bubble designs

Put it on your site
before you finish your coffee.

A hundred free messages, no card, and a playground to try it in before you touch a single line of your own markup.