Gradient Background Builder

ProNew

Build a gradient, see it as a full-size background with sample text on top, start from presets, and copy the CSS or a Tailwind arbitrary value. Use this when people design hero or card backgrounds visually.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

A page builder or theme editor lets people make their own gradient backgrounds.

Do not use it when: For single-color backgrounds use the color picker panel.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`onChange`	`(css: string) => void`	The `background-image` value after every change.

tailwindClass(css) is exported.

Accessibility

Presets are plain buttons; the preview is a labelled region with real text on it, so contrast can be judged where it matters. Everything in the editor comes from Gradient Picker (stops are sliders with keyboard control, plus number and button alternatives).
Copy actions announce what was copied in a polite status. The output is plain text you can also read and select.

Testing

The pattern ships with a Testing Library test (gradient-background-builder.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

A page builder or theme editor lets people make their own gradient backgrounds.

Do not use it when: For single-color backgrounds use the color picker panel.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`onChange`	`(css: string) => void`	The `background-image` value after every change.

tailwindClass(css) is exported.

Accessibility

Presets are plain buttons; the preview is a labelled region with real text on it, so contrast can be judged where it matters. Everything in the editor comes from Gradient Picker (stops are sliders with keyboard control, plus number and button alternatives).
Copy actions announce what was copied in a polite status. The output is plain text you can also read and select.

Testing

The pattern ships with a Testing Library test (gradient-background-builder.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.