CSS Gradient Generator

CSS Gradient Syntax

CSS gradients are image values generated by the browser, specified using the linear-gradient(), radial-gradient(), or conic-gradient() functions. They can be used anywhere a CSS image is accepted, most commonly as background-image or background values. Unlike solid colors, gradients create smooth transitions between two or more colors.

A basic linear gradient requires only two colors. The browser interpolates between them across the element:

/* Simple two-color gradient (top to bottom) */
background: linear-gradient(#3B82F6, #8B5CF6);

/* With direction */
background: linear-gradient(to right, #3B82F6, #8B5CF6);

/* With angle */
background: linear-gradient(135deg, #3B82F6, #8B5CF6);

Linear Gradients: Direction and Angles

Linear gradients flow along a straight line called the gradient line. The direction can be specified as an angle or a keyword. Angles start from the top (0deg = upward) and rotate clockwise: 90deg goes left-to-right, 180deg goes top-to-bottom, 270deg goes right-to-left. Keyword directions use the to syntax:

• to top = 0deg
• to right = 90deg
• to bottom = 180deg (default)
• to left = 270deg
• to bottom right = 135deg (approximately)

Color stops can include position values to control where each color appears along the gradient line. Positions can be percentages or absolute lengths:

/* Color stops with positions */
background: linear-gradient(
  90deg,
  #3B82F6 0%,
  #8B5CF6 40%,
  #EC4899 100%
);

/* Hard color stop (no transition) */
background: linear-gradient(
  to right,
  #3B82F6 0%,
  #3B82F6 50%,
  #EC4899 50%,
  #EC4899 100%
);

Radial Gradients

Radial gradients radiate outward from a center point. By default, the gradient is elliptical and centered in the element, with the farthest corner determining the extent:

/* Basic radial gradient */
background: radial-gradient(#3B82F6, #1E3A8A);

/* Circle shape */
background: radial-gradient(circle, #3B82F6, #1E3A8A);

/* Custom position */
background: radial-gradient(circle at 25% 25%,
  #3B82F6, #1E3A8A);

/* Size keywords */
background: radial-gradient(
  circle closest-side at 50% 50%,
  #3B82F6, #1E3A8A
);

The size keywords are closest-side, farthest-side, closest-corner, and farthest-corner (default). These determine where the final color stop reaches relative to the element's edges.

Multi-Stop Gradients and Advanced Techniques

Complex gradients can layer multiple color stops to create rich visual effects. You can also layer multiple gradients on a single element using comma separation:

/* Multi-stop gradient */
background: linear-gradient(
  135deg,
  #667eea 0%,
  #764ba2 25%,
  #f093fb 50%,
  #f5576c 75%,
  #fda085 100%
);

/* Layered gradients */
background:
  linear-gradient(135deg, #667eea33 0%, transparent 50%),
  linear-gradient(225deg, #f093fb33 0%, transparent 50%),
  linear-gradient(315deg, #fda08533 0%, transparent 50%),
  #1a1a2e;

For the smoothest color transitions, consider using the oklch() color space available in modern CSS. Interpolation in oklch produces more perceptually uniform gradients, avoiding the muddy mid-tones that can appear when transitioning between saturated colors in sRGB. Use hex to RGB conversion to get exact values for your gradient stops, and check text legibility over gradients with the contrast checker.