Gradient Generator

Linear · radial · conic · multi-stop · export CSS / Tailwind / SCSS / SVG

Stops · drag to position · double-click to add
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

About this tool

What gradient types can I create?
Linear, radial, and conic gradients with up to 10 color stops. Each stop is independently positioned and can have its own opacity.
Can I generate a gradient from an image?
Yes. Upload an image and the tool extracts dominant colors to suggest a matching gradient palette.
Does it output the CSS background property?
Yes. The output includes the full background or background-image CSS declaration, including vendor-prefixed -webkit- fallbacks.
Can I import gradients from popular design tools?
You can paste hex values from Figma or Sketch. Direct Figma import requires manual entry, but the multi-stop color picker makes recreation fast.
About

Design linear, radial, or conic CSS gradients with multi-stop drag editing and stacked layers. Click the preview to set the angle (linear/conic). Double-click the gradient track to insert a stop.

Made for

Designers, front-end developers.

Reach for it when
  • · Building a hero-section background
  • · Designing a button with a subtle color sweep
  • · Prototyping an aurora / mesh gradient

Related tools

Border Radius

Visualize and generate CSS border-radius values.

◱

Border Radius

Visualize and generate CSS border-radius values.

Open →

Box Shadow

Design CSS box shadows with visual controls.

▣

Box Shadow

Design CSS box shadows with visual controls.

Open →

Color Converter

Convert between HEX, RGB, HSL, and other color formats.

⬡

Color Converter

Convert between HEX, RGB, HSL, and other color formats.

Open →

Color Palette

Generate harmonious color palettes with multiple harmony rules.

🎨

Color Palette

Generate harmonious color palettes with multiple harmony rules.

Open →
View all tools →