GradientHub Integrations

Create perfect gradients for web and design — directly inside the tools you already use.

Design Plugins

Plugins for your design workflow

Install GradientHub plugins to generate, sync, and apply gradient presets across your design files without leaving your editor.

Figma Plugin

Generate CSS-ready gradients on any Figma layer. Supports linear, radial, and conic gradients with live preview. Syncs with your GradientHub account to access 2,400+ community presets. Auto-applies gradient stops to selected frames, vectors, and text layers. Version 3.2.1 — installed by 184,000+ designers.

Install in Figma

Sketch Plugin

Drop GradientHub into Sketch 95+. Browse curated gradient collections, apply them to artboards and symbols, and export CSS, Swift, or Kotlin code snippets. Includes a gradient inspector panel that mirrors the web editor. Version 2.8.0 — compatible with macOS 12+.

Install in Sketch

Adobe XD Plugin

Access GradientHub's gradient engine inside Adobe XD. Apply multi-stop gradients to shapes, groups, and components. Export gradients as reusable XD color themes. Syncs with your saved collections for cross-platform consistency. Version 1.5.3 — updated for XD 42+.

Install in Adobe XD

Browser & Editor Extensions

Extensions for development

Pick gradients on the fly while inspecting pages or writing code. Copy CSS instantly, or inject gradients into your stylesheet with one click.

Chrome Extension

Right-click any element on a webpage to extract its background gradient, then refine it in the GradientHub panel. Save extracted gradients to your library, generate color palettes from existing gradients, and copy CSS, SCSS, or Tailwind utility classes. Supports Chrome 110+ and Chromium-based browsers. 42,000+ active users.

Add to Chrome

VS Code Extension

Generate gradients inline while coding. Use the command palette to open the GradientHub panel, pick a gradient, and insert the CSS directly into your stylesheet. Supports CSS, SCSS, Less, and Tailwind config files. Includes snippet autocompletion for `background-image: linear-gradient(...)`. Version 1.1.7 — 28,500+ downloads.

Install in VS Code