New
Color PickersSwatch Grid Picker
A radiogroup of preset colour swatches where the choice is marked by a ring and a check, not colour alone.
#color#swatch#grid
3 frameworksBeginner
Loading…
Two colour inputs and an angle slider composing a live linear-gradient with copy-ready CSS.
<!--
Two native colour inputs plus an angle range compose a linear-gradient, previewed
live and printed as a copy-ready CSS string. Static snapshot.
-->
<div class="w-full max-w-sm">
<div class="h-28 w-full rounded-xl border border-black/10 dark:border-white/15" style="background:linear-gradient(90deg,#6366f1,#ec4899)"></div>
<div class="mt-3 flex flex-wrap items-center gap-3">
<label class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400"><input type="color" value="#6366f1" aria-label="From color" class="h-8 w-8 cursor-pointer rounded-md border border-black/10 bg-transparent dark:border-white/15" />From</label>
<label class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400"><input type="color" value="#ec4899" aria-label="To color" class="h-8 w-8 cursor-pointer rounded-md border border-black/10 bg-transparent dark:border-white/15" />To</label>
<label class="ml-auto flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400">Angle<input type="range" min="0" max="360" value="90" aria-label="Angle, 90 degrees" class="w-24 accent-indigo-600 dark:accent-indigo-400" /></label>
</div>
<code class="mt-3 block overflow-x-auto whitespace-nowrap rounded-md bg-gray-100 px-3 py-2 font-mono text-xs text-gray-800 dark:bg-gray-800 dark:text-gray-200">linear-gradient(90deg, #6366f1, #ec4899)</code>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
from | string | '#6366f1' | From |
to | string | '#ec4899' | To |
angle | number | 90 | Angle |
onChange | (css: string) => void | - | On change |
Set `from`, `to` and `angle`, and read the composed string from `onChange`. The CSS output is a single horizontally scrollable line, never wrapped, because a wrapped gradient string is easy to mis-copy.