Switching to Gradient View
PressG to cycle through the three views: palette → gradient → extract. You can also click the compact tab strip on the right edge of the content area.
The view tab strip
A vertical strip of dots sits fixed on the right edge of the main content area. At rest it shows three small circles — one per view, filled for the active view, outlined for the others. Hovering the strip expands it leftward to reveal the view labels: palette, gradient, extract. Click any dot or label to switch views immediately. The active view transitions with a 150ms opacity crossfade so the switch feels instant without a harsh cut.How Stops Are Seeded
When you first open the gradient view, all palette colors are placed as stops, evenly distributed across the 0–100% range:- With two palette colors: one stop at 0%, one at 100%.
- With more colors: stops are spaced proportionally — e.g. five colors land at 0%, 25%, 50%, 75%, 100%.
- Each stop is palette-linked by default, meaning its color tracks the palette color it came from. When you reroll, edit, or replace a palette color, every linked stop updates automatically.
The Gradient Preview
Above the stop bar is a live preview panel. Five aspect ratio options appear in the top-right corner — 16:9, 4:3, 1:1, 4:5, 9:16 — and switching between them animates the preview box with a spring transition. The gradient respects the current angle and stop positions at all times.The Stop Bar
Below the preview, a horizontal gradient bar shows the current gradient rendered left-to-right (always horizontal, independent of the angle setting — this bar is a position editor, not an angle preview).Adding stops
Click any empty area of the bar to place a new stop at that position. The new stop inherits the first palette color by default. You can reassign its color immediately from the color picker that opens. A collision guard prevents stops from being placed within 2% of an existing stop. Clicking too close to another stop does nothing.Moving stops
Each stop has a small colored handle below the bar. Drag a handle left or right to reposition it. The collision guard also applies during drag — a stop won’t move into a position within 2% of another stop. The selected stop displays its current position as a percentage label below its handle.Deleting stops
Hover over any stop handle to reveal a small × button beneath it. Click it to delete the stop. Deletion is blocked when only 2 stops remain — the minimum for a valid gradient. The × button appears visually disabled (dimmed, not clickable) at that point.Selecting stops
Click a stop handle (without dragging) to select it and open its color picker. Dragging a stop deselects any open picker.The Color Picker
Clicking a stop handle opens a StopColorPicker popover anchored to that stop’s position. The picker offers two ways to assign a color: Palette swatches — all current palette colors are shown as clickable swatches. Picking one links the stop to that palette color; the stop will track it on future palette changes. Custom hex input — type any hex value directly to assign a fixed color. Once a custom hex is entered, the stop is no longer linked to the palette and will not update on reroll. The picker flips its alignment automatically when a stop is past 70% to avoid overflowing the right edge.Angle Control
Below the stop bar, an angle row lets you set the gradient direction:- Slider — drag from 0° to 360°.
- Numeric input — type an exact value. The input normalizes out-of-range values on blur (e.g. negative angles wrap around: −45° becomes 315°). Leaving the field empty resets to 90°.
- − / + buttons — nudge the angle by one degree at a time.
linear-gradient() angle convention.
Exporting Gradients
PressE while in the gradient view to open the gradient export dialog — the same key that opens the palette export dialog when you’re in the palette view. The E key is context-aware.
You can also click the export button in the bottom-right of the gradient view.
In the palette view,
E opens the palette export dialog. In the gradient view, E opens the gradient export dialog. Switching views changes what E does.Available export formats
- CSS
- Tailwind
- SVG file
- PNG
Copies a Use keyboard navigation (↑↓) in the dialog and press Enter to export, or click the format row directly.
linear-gradient(...) declaration to your clipboard, ready to paste into any stylesheet or inline style attribute.Keyboard Reference
| Key | Action |
|---|---|
G | Cycle views (palette → gradient → extract) |
E | Open gradient export dialog (when in gradient view) |
Esc | Close the export dialog |
| ↑ / ↓ | Navigate export format list |
| Enter | Confirm selected export format |
Related Pages
Exporting Palettes
Export the full palette as CSS, JSON, Tailwind, SCSS, or art app formats.
Extract from Image
Pull dominant colors from an image to seed your palette — and your gradient stops.
Keyboard Shortcuts
Full reference for every shortcut, including context-aware keys like E and G.
Export Formats
Technical details for every supported export format.