Gradients
The gradient brush — mix one, then paint it onto the IDE. Types, stops, animation, and where a gradient can land.
Gradients get their own tool because they are the fastest way to make the IDE stop looking like a default. The tool works like a paintbrush: mix the ink first, then click what you want painted.
Mixing and painting#
Pick Gradient from the toolbar. A panel opens headed Gradient brush, with the instruction Tune it, then click a section to paint, and that's exactly the order.
Nothing changes while you're adjusting. When the gradient looks right, click a region of the live IDE and it lands there. The cursor becomes a crosshair and whatever is paintable under it highlights as you move. The brush stays loaded, so you can paint several things in a row.
Important
The brush only lands on a paintable element, and there are six of them: the header, the footer, the main content area, the chat panel, and the file explorer's container and its toolbar.
Clicking anywhere else does one of two things. On an element Semantix recognises but doesn't mark as themeable — a tab, a file row, a chat bubble, a button — the gradient applies for this session only and is thrown away when you leave edit mode. On anything else, the click is a silent no-op: no gradient, no message.
The tab strip has no paintable element at all, so the brush can never keep a gradient there. To put a gradient on tabs, rows or bubbles durably, use the part's own background-color control in the Sections map and choose Gradient — that route saves properly.
A gradient painted on one of the six does stick: no save step, and it survives a restart.
The controls#
Three types: linear sweeps from one colour to another across the shape, radial blooms from the centre outward, conic sweeps around a point.
Stops — as many as you like, minimum two. Drag the handles along the ramp to move them, click an empty part of the track to add one where you clicked, or use Add stop to drop one in the middle. Each stop has its own colour and its own Opacity, which is how transparency gets into a theme — the flat colour rows elsewhere are opaque hex only.
Angle — 0 to 360°, for linear and conic. It disappears for radial, which has no direction.
Presets — sixteen ready-made gradients: Warm Cream, Cream → Dark, Brand Clay, Luminous Fade, Cream → Lavender, Sunset, Ocean, Aurora, Purple Haze, Mango, Twilight, Rosé, Emerald, Peach, Cosmic (radial) and Spectrum (conic). Loading one replaces your stops, angle and type.
Variants — three one-click gradients derived from the stop you have selected: Monochromatic, Analogous, Complementary. A quick way to get a coherent pair without picking the second colour yourself.
Copy — buttons for the CSS and the Tailwind form, if you want the value somewhere else.
Animation#
A gradient can move. Animate offers Flow, Hue, Breathe and Rotate alongside None.
With one chosen you also get Speed (1–20 seconds), a direction — Normal, Alternate or Reverse — and an Ease: Linear, Smooth, Glide or Spring.
Note
An animated gradient keeps running when the window loses focus, and it does not check your system's reduced-motion setting. The pause-on-blur and reduced-motion guards in Semantix cover the free-hand section stylesheets a theme can carry — not gradients you paint with this tool. Choose a slow speed if the movement will sit in the corner of your eye.
Where a gradient can go#
On one of the six paintable regions, via the brush — see the warning above.
On any part, by choosing Gradient inside that part's background-color control in the
Sections map. This is the durable route, and the only one that reaches tabs,
file rows and chat bubbles.
The code editor background, from the Code editor background row in the Global panel — the one colour row with a gradient toggle. That one is static: the animation controls are hidden there, because the slot can only hold a plain value.
Not the whole-app wallpaper, by hand. A theme can carry a full-bleed background image or gradient behind everything, but there is no picker for it in the editor today. It arrives with a theme you import or install, or it gets written by Ask Claude for a theme. Reset all clears it.