Orvain UI

Gradient builder, on canvas

Editing a gradient directly on the gradient.

Get Pro to installPro13 blocksReact, Vue and Figma
MCPConnect the MCP server

Gradient

snap 15°

Double-click the line to add a stop. Drag a stop off it to remove it.

Hue226°
Opacity100%
CSS
background: linear-gradient(135deg, #0B1F6B 0%, #3E6BFF 45%, #FF9AC4 100%);

More in Color Picker blocks#

Colour picker

The picker a design tool opens: paint type, stops, area and the value field in one card

Colour picker, contrast map

Picking text colours: the area shows where text stays readable on your background

Colour picker, tokens

A picker inside a design system that steers back to the system

Fancy picker

The same picker as a panel: tabs for your own colours and the shared libraries

Gradient builder

Building a gradient you can paste: stops, positions, angle and the CSS

Gradient builder, on canvas

Editing a gradient directly on the gradient

Gradient builder, smooth

Gradients without the grey middle: sRGB and OKLCH side by side

Choose colour

A compact colour field with the parts that were missing

Choose colour, field

How a colour is chosen in a form: a field that opens a picker

Choose colour, tones

Pick a hue, then a tone from a ramp of nine

Change colour

Recolouring labels in place

Change colour, palette

Recolouring from a few colours that work together

Change colour, in place

Recolouring without a popover

When to use#

  • A theme editor where someone sets the colors the product will inherit
  • Design and diagramming tools, where color is chosen many times in a session
  • Building a gradient that will be pasted into a stylesheet
  • Recoloring a label, a calendar or a category from the row it belongs to

The whole set, with its codePro

Pro opens the Code tab on every block here, in React and Vue, plus the Figma file and the MCP server for your editor.

Open in BlocksSee plans