CSS Gradient Generator

linear-gradient

/* Direction keyword */
background: linear-gradient(to right, #ff0000, #0000ff);

/* Specific angle (0deg = up, 90deg = right) */
background: linear-gradient(45deg, red, blue);

/* Multi-stop with positions */
background: linear-gradient(
  to bottom,
  red 0%,
  yellow 50%,
  green 100%
);

/* Hard color stops (no gradient) */
background: linear-gradient(
  to right,
  red 50%,
  blue 50%
);

radial-gradient

/* Default (ellipse to corners) */
background: radial-gradient(red, blue);

/* Circle from a position */
background: radial-gradient(circle at top right, red, blue);

/* Sized */
background: radial-gradient(
  circle 200px at center,
  yellow,
  red
);

conic-gradient

/* Color wheel */
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

/* Pie chart (3 slices) */
background: conic-gradient(
  red 0deg 120deg,
  blue 120deg 240deg,
  green 240deg 360deg
);

Modern: gradient color spaces (CSS Color 4)

/* OKLCH gives perceptually uniform interpolation */
background: linear-gradient(
  in oklch,
  red,
  blue
);

/* Compare to default sRGB — looks muddy in the middle */
background: linear-gradient(red, blue);

OKLCH/OKLAB color spaces avoid the muddy gray midpoint that sRGB gradients produce. Supported in all modern browsers since 2023.

1. Use 2–3 colors max

Most professional gradients use 2 colors with similar hues (analogous palettes) or one color with varying lightness. 4+ colors usually look chaotic. Stripe.com, Linear.app, Vercel.com — all use simple 2-stop gradients in their hero sections.

2. Avoid muddy midpoints

A red-to-blue gradient in sRGB passes through ugly gray in the middle. Solutions: (1) use in oklch for perceptually uniform mixing, or (2) add a vibrant midpoint color (red, purple, blue) so the path stays saturated.

3. Use opacity for depth

Layer multiple gradients with transparency for depth:

background:
  linear-gradient(135deg, rgba(255,0,150,.4), transparent),
  linear-gradient(45deg, rgba(0,150,255,.4), transparent),
  #1a1a2e;

4. Mesh gradients (multi-radial)

Stack multiple radial gradients at different positions for the trendy "mesh gradient" look popular in 2024+ UI:

background:
  radial-gradient(at 20% 30%, hsl(20, 80%, 60%), transparent),
  radial-gradient(at 80% 70%, hsl(280, 80%, 60%), transparent),
  hsl(220, 50%, 30%);

5. Use HSL for variations

HSL (Hue, Saturation, Lightness) is easier to manipulate than HEX. To create a gradient between similar shades: hsl(220, 80%, 50%) → hsl(220, 80%, 70%) — same hue, lighter version. OKLCH is even better for perceptual uniformity.

Do I need the -webkit- prefix?

Not for any browser shipped after 2017. The unprefixed linear-gradient() works in Chrome, Safari, Firefox, Edge, and all mobile browsers. The -webkit- prefix only matters for very old Safari (<7) and very old Android Browser. Just use the unprefixed version.

Can I add more than 2 colors?

Yes — CSS gradients support unlimited color stops. This tool's UI allows up to 5 (anything more is rarely useful). Each color can have an explicit position (red 0%, yellow 30%, green 100%) or be evenly distributed.

What's the angle convention?

CSS uses 0deg = up (gradient goes from bottom to top), then clockwise: 90deg = right, 180deg = down, 270deg = left. Direction keywords (to top, to right, etc.) are equivalent and often clearer.

Can I animate gradients?

Not directly — CSS can't animate background-image with transition. Workarounds: animate background-position on a large gradient, use @property to register custom CSS variables with type <color>, or use SVG gradients with SMIL.

Why does my gradient look banded on dark colors?

Color banding happens when 8-bit color depth (256 levels per channel) can't represent smooth transitions between similar dark colors. Solutions: add subtle noise (CSS gradient + SVG noise overlay), use HDR with color() function (limited support), or target media queries for high-bit-depth displays.

Are gradients accessible?

They can be — but text on top of gradients often fails contrast checks. WCAG requires 4.5:1 contrast ratio for normal text. Test the lightest and darkest points of your gradient against your text color, not just the center.