Smart CSS Gradient Generator

Create beautiful modern gradients visually with live preview, draggable color stops, angle dial, Tailwind export, and preset library.

Live PreviewTailwind ExportLinear & RadialGradient PresetsCSS Ready

How to use

1

Choose gradient type

Select Linear, Radial, or Conic gradient type. Linear creates diagonal or directional transitions; Radial radiates from a center point; Conic rotates around a point like a pie chart.

2

Edit color stops

Drag the handles on the gradient bar to reposition stops. Click any empty area on the bar to add a new stop at that position. Use the color picker, hex input, and opacity slider to fine-tune each stop.

3

Set the angle

Drag the circular dial or type an angle to control the gradient direction. Use the 8 quick-direction buttons for common angles (→ ↘ ↓ ↙ ← ↖ ↑ ↗). Presets auto-apply sensible angles.

4

Copy and export

Copy the CSS or Tailwind class string with one click. For SVG export, click 'Export as SVG' to download a scalable gradient file. Use in any project immediately.

When to use CSS gradients

Hero backgrounds

Gradient hero sections are a staple of modern SaaS landing pages — they create depth and visual interest without the performance cost of images.

CTA buttons

Gradient buttons stand out more than flat buttons and signal interactivity. A subtle gradient is especially effective on primary action buttons.

Card headers

Gradient card headers create visual hierarchy and polish. They work well for pricing cards, feature cards, and dashboard widgets.

Gradient text

Gradient text creates bold typographic moments for taglines, headings, and emphasis text. Achieved with background-clip: text and -webkit-text-fill-color: transparent.

Progress indicators

Conic gradients are perfect for circular progress bars and pie charts — they create smooth visual feedback without canvas or SVG complexity.

Patterns & textures

Repeating gradients create CSS-only diagonal stripes, grid patterns, and textured backgrounds — no external images or SVGs needed.

How it works

Gradient engine

The CSS gradient is rebuilt in real time from the sorted color stop array. Each stop carries a position (0–100%), color, and opacity. Opacity below 1 switches the output from hex to rgba().

Draggable stops

Mouse and touch events on the gradient bar are handled via document-level listeners attached once on mount (useRef for drag ID per CLAUDE.md), preventing stale closures and re-registration on every render.

Tailwind exporter

For linear gradients at standard angles the exporter produces bg-gradient-{dir} with JIT color classes. For arbitrary angles or more than 3 stops it falls back to a bg-[...] arbitrary value string.

SVG export

The SVG generator converts the angle to x1/y1/x2/y2 gradient coordinates (rotated from the CSS convention), embeds all color stops, and downloads an 800×500 SVG ready for design tools.

Related tools

Color Picker

Pick, convert and explore HEX, RGB, HSL and HSV color values.

Meta Tag Generator

Generate Open Graph, Twitter Card and SEO meta tags for any page.

Favicon Generator

Generate favicon.ico, Apple touch icons and PWA icons in all sizes.

Image Watermark

Add text or image watermarks to photos with custom opacity and position.

Frequently asked questions

Quick answers about this free online tool.

A CSS gradient is a built-in image type that creates a smooth transition between two or more colors without requiring any image file. CSS offers three types: linear-gradient (transitions along a straight line at a specified angle), radial-gradient (radiates outward from a center point), and conic-gradient (rotates color stops around a point like a pie chart). Gradients are resolution-independent, scale perfectly at any size, and are rendered entirely by the browser.

linear-gradient(angle, color-stop1, color-stop2, ...) transitions colors along a straight line defined by an angle in degrees. For example, linear-gradient(90deg, #667eea 0%, #764ba2 100%) creates a horizontal left-to-right gradient. The angle can also use keywords like 'to right', 'to bottom right', etc. Color stops are positioned using percentages or lengths along the gradient line — you can add as many stops as needed for complex multi-color effects.

radial-gradient creates a gradient that radiates outward from a central point in a circular or elliptical pattern. It's ideal for spotlight effects, glowing buttons, circular backgrounds, and depth effects. The syntax is radial-gradient(shape size at position, color-stops...). For example, radial-gradient(circle at center, #667eea 0%, #764ba2 100%). You can control the shape (circle or ellipse) and center position.

A conic-gradient rotates color stops around a center point, similar to a color wheel or pie chart. Colors are placed at angular positions rather than spatial distances. For example, conic-gradient(from 0deg, red, yellow, green, blue, red) creates a full-spectrum wheel. Conic gradients are perfect for pie charts, progress rings, color pickers, and decorative sunburst patterns.

Yes — Tailwind provides gradient utilities via bg-gradient-to-{direction} combined with from-{color}, via-{color}, and to-{color} classes. For custom angles or arbitrary colors, Tailwind's JIT mode supports arbitrary values like bg-[linear-gradient(135deg,#667eea_0%,#764ba2_100%)]. This tool generates both standard Tailwind direction classes (from-[color] to-[color]) and JIT arbitrary value strings for full flexibility.

For smooth, natural gradients, add intermediate color stops that bridge your start and end colors. Instead of jumping directly between hues, add a midpoint that gently transitions between them. Also consider using perceptually uniform color spaces — shifting only the hue while keeping saturation and lightness consistent produces especially smooth results. This tool's random generator uses HSL-based color selection for this reason. You can also try easing the stops (cluster them closer together at one end) to create non-linear gradient flow.

Yes — CSS gradients are fully responsive because they are computed by the browser and scale to any element size without pixelation or quality loss. They behave exactly like background images and automatically adapt to width, height, and viewport changes. This makes them ideal for responsive hero sections, buttons, and card headers where fixed-size images would create alignment or scaling problems.

repeating-linear-gradient tiles the gradient pattern instead of stretching it to fill the element. A regular linear-gradient always stretches to fill the full element. A repeating version repeats the color stop sequence at the defined lengths — for example, repeating-linear-gradient(45deg, #667eea 0px, #764ba2 20px, #667eea 20px) creates diagonal stripes. Use repeating gradients for CSS patterns, textures, striped backgrounds, and decorative ruled lines.