Mesh Gradient

Design mesh gradients beside a thread and hand the exact values to your agent. Ask the agent for options that fit the project, edit points on a live canvas, and check text readability on an OG card, hero, or avatar. Export CSS, a PNG, or design tokens into your project.

Overview

View source

Start from the thread

Open Mesh Gradient from a thread's right panel and it sits beside the conversation. Choose Ask the agent and the thread's agent proposes a few gradients that fit the project, each with its name and a one-line reason. They appear under For this thread, and a fresh panel opens on the one whose text reads best. Once you start editing, new proposals wait in the row instead of replacing your work.

Edit on the canvas

Drag points to move them, click one to recolor it or change its falloff, double-click to add one, and press ⌘Z to undo. You can also start from a seed, one of six style palettes, or your own base color.

Check it where it will live

A badge on the canvas names the text color that reads best, such as White text · Readable, Black text · Large text only, or Text is hard to read, using WCAG contrast. Switch the preview between Canvas, a 1200×630 OG card, a hero, and an avatar. The OG card and hero draw sample copy so you can see whether a headline holds up.

Hand it back

Send to agent saves the gradient and writes the request into the composer with the exact values attached. On an OG card, hero, or avatar it also names the surface and the readable text color, or asks for a scrim when neither color works.
Mention a saved gradient in any thread with @gradient.
Export PNG renders the current surface at full size and attaches it to the project.
Write token file writes your library into the thread's checkout as CSS custom properties, Tailwind, or TypeScript tokens.
Agents can propose, generate, and read gradients with the mesh_gradient tool or bb mesh-gradient commands.

The six palettes also ship as bb themes in Settings → Appearance.

More from brsbl

AmbientTurns bb's background into a live scene that shows what your agents are doing at a glance. Each working agent becomes a character in the scene, a thread waiting on you pulses, and a finished turn sends out a ripple that turns red on an error. Describe a scene in your own words and an agent paints it in a new thread, complete with its own sliders, or let a daily automation paint a new one each day. Ten built-in scenes, including Poppy Hill, Koi Pond, and Starry Fjord, each have their own sliders and four-color palette. Runs inside bb with no external service; each painted scene uses one agent turn on your default provider.New Plugin FinderFind the plugin for your task without leaving the thread. Type # or @ and a keyword to search the plugins you have and the ones in BB Community, then mention the one you want your agent to use. Your agent can also search the catalog itself from the command line.53 Color SwatchesShows a color chip beside CSS values in messages, code, and diffs, so you can recognize colors without copying them into another tool.24 Context KatamariShows how full each thread's context window is as a katamari that grows with every turn and pops when bb compacts. A floating window gives the open thread a 3D toy-box world whose ball size tracks tokens used against the auto-compact point. The HUD shows tokens used, context left, a bar for each recent turn, and a count of compactions. The cousin rolls while the thread works, drops coins past 50k tokens, and gets dizzier after each compaction. Everything runs inside bb, with synthesized sound you can mute.New