gradient generator

How to use the gradient generator

  1. Choose gradient type: linear (most common, directional), radial (circular, from a center point), or conic (rotates around a point, useful for pie-chart backgrounds and loading spinners).
  2. Click the first color stop to pick a starting color. Drag the stop along the gradient bar to change its position. Click empty space on the bar to add more stops — up to 10 are supported.
  3. Adjust angle (for linear), shape and size (for radial), or rotation offset (for conic).
  4. Toggle Tailwind v4 arbitrary value output alongside the standard CSS.
  5. Copy the generated background: declaration — works on any HTML element.

When to use it

Gradients add visual depth and direction to hero sections, CTA buttons, and cards without requiring any images. Use them when a solid color feels flat or when you want to hint at movement (e.g., a top-to-bottom hero gradient that pulls the eye toward the headline). Avoid gradients on large text or long-form paragraphs — they hurt readability. Alternative: cssgradient.io is the classic gradient editor but lacks conic support and Tailwind output.

Example

/* Sunset hero */
background: linear-gradient(135deg, #ff6b6b 0%, #feca57 50%, #ff9ff3 100%);

/* Conic for a pie-chart loader */
background: conic-gradient(#10b981 0deg 120deg, #f3f4f6 120deg 360deg);

/* Mesh-style radial */
background:
  radial-gradient(at 20% 30%, #3b82f6 0%, transparent 50%),
  radial-gradient(at 80% 70%, #a855f7 0%, transparent 50%),
  #0f172a;

Frequently asked questions

What's the difference between linear, radial, and conic?
Linear gradients go in a straight line (top to bottom, left to right). Radial gradients emanate outward from a center point like ripples. Conic gradients rotate around a point like a clock hand — they're great for pie charts, progress indicators, and loading spinners.
Does CSS support multi-stop gradients?
Yes. Each gradient function accepts unlimited color stops, each with an optional position. linear-gradient(to right, red 0%, orange 25%, yellow 50%, green 75%, blue 100%) is valid.
How do I animate a gradient?
CSS gradients don't directly animate between values. The common technique is to create a very large gradient and animate background-position. For smooth true gradient transitions, use @property with CSS custom properties (Chrome 85+, Safari 16.4+).
Why does my gradient look banded?
Banding happens when the gradient transitions between similar colors at low bit depth. Add a subtle noise texture overlay, or use oklch() color syntax which interpolates more smoothly than RGB.
Can I use gradients on text?
Yes — apply the gradient as background-image and set background-clip: text; color: transparent. See the gradient text generator for a dedicated tool.

Related generators

Last updated: 2026-04-23