GradientHub Features: Full Control Over Color
Create perfect gradients for web and design
GradientHub gives you pixel-perfect control over every gradient you create. Whether you're designing a landing page hero, building a component library, or prototyping a mobile app, our toolset covers linear, radial, conic, and animated gradients — all exportable in the formats you actually use.
The editor supports real-time preview on light and dark backgrounds, color-stop positioning down to the percent, and alpha-channel transparency on every stop. You can save up to 50 projects per account, organize them into named collections, and share a live preview link with your team in one click. GradientHub is used by designers at companies like Vercel, Linear, and Stripe to ship consistent gradient systems.
Core Tools
Every Gradient Type You'll Ever Need
Linear Gradients
Set any angle from 0° to 360° or use directional keywords (to top, to bottom right, etc.). Add unlimited color stops with precise positioning and opacity control. Supports repeating-linear syntax for pattern-like effects.
Radial Gradients
Choose ellipse or circle shape, define the center point with percentages or keywords, and pick closest-side, farthest-side, or explicit radius/axis lengths. Ideal for soft backgrounds, spotlight effects, and depth simulations.
Conic Gradients
Create color wheels, donut charts, and angular transitions with CSS conic-gradient(). Set the rotation angle, position the center, and layer multiple stops for complex sector-based designs.
Animated Gradients
Define keyframes that shift color stops, rotate angles, or morph between gradient types. Export as CSS @keyframes with configurable duration, easing (linear, ease-in-out, cubic-bezier), and iteration count. Preview the animation loop directly in the editor.
Color Palette Integration
Import palettes from Coolors, Adobe Color, or Tailwind CSS. Pick any two or more swatches and instantly generate a gradient preview. Extract a palette from an existing gradient with one click — useful for building cohesive color systems.
Noise & Texture Overlay
Layer SVG-based noise filters over any gradient to remove banding on 8-bit displays or add a subtle grain aesthetic. Adjustable intensity from 0.1 to 2.0, with options for monochrome or colored noise.
Export Options
Ship in the Format Your Project Requires
One gradient, every output. Copy production-ready code or download assets without leaving the editor.
CSS (background-image)
Standard CSS gradient syntax, minified or formatted. Includes vendor prefixes for -webkit-gradient when needed. Works in all modern browsers — Chrome 112+, Firefox 115+, Safari 16+, Edge 112+.
Tailwind CSS Config
Generate a ready-to-paste gradientEntry for your tailwind.config.js using the gradientTheme plugin. Supports arbitrary values via square-bracket notation for JIT mode.
SVG & PNG
Download as a scalable SVG with embedded defs/linearGradient or as a raster PNG at 1×, 2×, or 3× resolution (up to 4096px). Useful for design tools that don't support CSS gradients natively.
Figma Token / JSON
Export gradient definitions as a JSON file compatible with Figma Variables and Style Dictionary. Includes stop positions, hex/rgba values, and angle metadata for design-token workflows.
React Component
Generate a self-contained React component with inline styles or CSS-in-JS (styled-components, Emotion). Includes TypeScript types and a Storybook preview template.
iOS / Android Assets
Export as a .xcassets gradient catalog for Swift UI or an Android XML gradient drawable. Preserves exact color stops and angles for native app development.