Skip to content
Primio Docs

Gradient Builder

The Gradient Builder is an interactive tool for designing gradients visually. You pick colors, adjust positions, and see the result in real time. When you’re happy with it, copy the generated Flutter code and send it to the AI.

Open the attachments menu (+ button) and select Gradient Builder. The Gradient Builder is available in existing projects only — not on the new project prompt.

Gradient Builder — live preview with presets, color controls, and Flutter code generation

Layout

Section titled “Layout”

The builder has two main areas:

Left panel — live preview canvas showing your gradient, a filter selector, and the generated Flutter code.

Right panel — three tabs for adjusting the gradient:

Presets tab

Section titled “Presets tab”

Browse 20+ built-in gradient presets organized in categories (linear, radial, and sweep). Examples include Sunset Glow, Ocean Blue, Purple Midnight, and Forest Dawn. Click any preset to apply it instantly, then customize from there.

Starting from a preset is often faster than building from scratch.

Colors tab

Section titled “Colors tab”

Control the individual color stops that make up your gradient:

  • Up to 8 color stops — each with a color picker and position value
  • Add or remove stops — more stops create more complex blends
  • Adjust positions — edit position values manually or use the increase/decrease buttons to control where each color starts and ends

Settings tab

Section titled “Settings tab”

Configure the gradient type and direction:

  • Linear gradient — blends along a straight line. Adjust the angle from 0 to 360 degrees.
  • Radial gradient — blends outward from a center point. Adjust the radius to control spread.
  • Sweep gradient — blends in a circular sweep around a center point. Adjust the start and end angles.

Using the generated code

Section titled “Using the generated code”

The Flutter code in the left panel updates in real time as you make changes. When your gradient looks right:

  1. Click Copy Flutter code to copy it to your clipboard
  2. Paste it into your chat prompt
  3. Tell the AI where to use it

You don’t need to understand the Dart code. Just paste it and describe the placement:

“Apply this gradient to the home screen background: [pasted code]”

“Use this as the header gradient on all screens: [pasted code]”

A help button next to the code explains what the generated Dart code does, if you’re curious.

Common use cases

Section titled “Common use cases”
  • App backgrounds and hero sections
  • Button and card gradients
  • Navigation bar backgrounds
  • Splash and loading screens
  • Overlay effects on images

Next steps

Section titled “Next steps”