VS Code Extension — ColorFlow

Professional color gradients for modern developers. Generate, preview, and drop gradients directly into your code — no context switching required.

Install from Marketplace See it in action

What it does

Build gradients inside your editor

ColorFlow adds a gradient picker panel to VS Code's sidebar. Choose a preset, tweak stops and angles, and insert the finished CSS, Tailwind, or SCSS output with one click — all without leaving your terminal window.

Inline Preview

A live swatch renders above your cursor as you type linear-gradient(...). See the exact colors before you save. Supports CSS, SCSS, Less, and Tailwind utility classes.

120+ Curated Presets

Ship with collections like "Aurora Borealis" (3-stop conic), "Midnight Tokyo" (4-stop linear), and "Solar Flare" (radial). Each preset includes a copy-paste token and a one-click insert.

Multi-Format Export

Output to CSS background-image, Tailwind bg-gradient-to-r, SCSS variables, or even JavaScript hex arrays for canvas rendering. Switch formats with a dropdown in the sidebar.

Workspace Sync

Save custom gradients to a shared .colorflow.json file at your project root. Team members pull the repo and get the same palette instantly — no manual handoff.

Get started

Install in under 30 seconds

ColorFlow is available on the official VS Code Marketplace. Works with VS Code 1.85+, VSCodium, and Code OSS on Windows, macOS, and Linux.

Via Marketplace

Open the Extensions view (Ctrl+Shift+X), search for "ColorFlow", and click Install. The extension is published under publisher ID colorflow-team and is verified by Microsoft.

Via Command Line

Run code --install-extension colorflow-team.colorflow from your terminal. This works in CI pipelines, provisioning scripts, and remote containers.

Via VSIX

Download the latest .vsix from the releases page and install with code --install-extension colorflow-1.4.2.vsix. Useful for air-gapped machines or custom forks.

Install from Marketplace Download VSIX (v1.4.2)

Speed up your workflow

Keyboard shortcuts

Every common action has a shortcut. Remap them in keybindings.json if you prefer a different layout. All defaults are designed to avoid conflicts with popular extensions like Prettier, ESLint, and GitLens.

Open Gradient Panel

Ctrl+Shift+G (Windows/Linux) or Cmd+Shift+G (macOS). Toggles the sidebar panel where you browse presets and build custom gradients.

Insert at Cursor

Ctrl+Shift+I / Cmd+Shift+I. Takes the currently selected gradient and inserts the formatted output at your cursor position, respecting your active file's language.

Cycle Presets

Ctrl+Shift+→ / ←. Step forward or backward through the preset library. Works even when the panel is closed — a small toast preview appears at the bottom-right.

Copy Hex Array

Ctrl+Shift+C / Cmd+Shift+C. Copies the current gradient's stop colors as a JavaScript array like ["#ff6b6b","#4ecdc4","#45b7d1"] for use in canvas or SVG work.

Save to Workspace

Ctrl+Shift+S / Cmd+Shift+S (when panel is focused). Persists the active gradient into your project's .colorflow.json with a unique ID and timestamp.

Convert Format

Ctrl+Shift+F / Cmd+Shift+F. Cycles the output format for the selected gradient: CSS → Tailwind → SCSS → JS Array → back to CSS.