CSS Gradient Generator: Complete Guide to Linear and Radial Gradients

CSS gradients are one of the most powerful visual tools available to web designers — they create smooth transitions between colors without a single image file, render at any resolution, and animate with CSS transitions. Yet many designers only use the basics: two colors, one direction.

This guide covers the full range of CSS gradient capabilities: the three gradient types, advanced color stops, angle notation, and creative techniques like mesh gradients, gradient text, and striped backgrounds — plus performance considerations and best practices.

CSS gradient types overview

CSS provides three gradient functions. linear-gradient() creates a transition along a straight line, defined by a direction or angle. radial-gradient() creates a transition that radiates outward from a central point, in a circle or ellipse. conic-gradient() creates a transition that sweeps around a central point like a color wheel or pie chart. All three are used as values for the background-image property (and can be combined with other background layers using commas). They are not images but CSS-generated values, which means they can be animated with @property (CSS Houdini) and respond to color scheme preferences with prefers-color-scheme.

linear-gradient syntax and angles

The basic syntax is linear-gradient(direction, color-stop-1, color-stop-2, ...). Direction can be a keyword (to bottom, to right, to bottom right) or an angle in degrees (0deg = upward, 90deg = rightward, 180deg = downward). The angle system uses compass-style measurement: 0deg points up (12 o'clock), increasing clockwise. Common directions: to bottom = 180deg, to right = 90deg, to top right = 315deg. You can also use turns (0.25turn = 90deg) or radians.

/* Equivalent declarations */
background: linear-gradient(to bottom, #3A7BD5, #00D2FF);
background: linear-gradient(180deg, #3A7BD5, #00D2FF);

/* Diagonal */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* Multi-stop */
background: linear-gradient(
  to right,
  #f093fb 0%,
  #f5576c 50%,
  #4facfe 100%
);

Color stops and transitions

Color stops define where each color starts and ends within the gradient. Without explicit positions, colors are evenly distributed. With positions, you control the exact location: a percentage (0–100%), a length (px, rem, em), or a calc() expression. Two adjacent stops at the same position create a hard edge (no transition) — useful for striped backgrounds. A color hint (a single value between two stops) shifts the midpoint of the transition: background: linear-gradient(red, 30%, blue) makes the transition start later, compressing the red zone.

/* Hard stops — stripes */
background: linear-gradient(
  to right,
  #e74c3c 0% 33%,
  #3498db 33% 66%,
  #2ecc71 66% 100%
);

/* Color hint — non-linear transition */
background: linear-gradient(
  to right,
  #3A7BD5,
  20%,
  #00D2FF
);

/* Transparent fade */
background: linear-gradient(
  to bottom,
  rgba(0,0,0,0),
  rgba(0,0,0,0.8)
);

radial-gradient and conic-gradient

radial-gradient() radiates from a center point. The syntax: radial-gradient(shape size at position, colors). Shape: circle or ellipse (default). Size: closest-side, farthest-corner, etc. Position: same as background-position (center, top right, 50% 30%). conic-gradient() sweeps around a center point: colors are distributed around 360°. Useful for pie charts, color wheels, and rotational patterns. The from keyword sets the starting angle: conic-gradient(from 45deg, red, yellow, green). Repeating variants (repeating-linear-gradient, repeating-radial-gradient, repeating-conic-gradient) tile the gradient pattern.

/* Radial spotlight */
background: radial-gradient(
  circle at center,
  #3A7BD5 0%,
  transparent 70%
);

/* Conic — color wheel */
background: conic-gradient(
  red, yellow, lime, cyan, blue, magenta, red
);

/* Repeating stripes */
background: repeating-linear-gradient(
  45deg,
  transparent,
  transparent 10px,
  rgba(0,0,0,0.1) 10px,
  rgba(0,0,0,0.1) 20px
);

Creative gradient techniques

Gradient text: apply a gradient to background-image, then use background-clip: text and -webkit-background-clip: text with color: transparent. This clips the gradient to the text shape. Gradient borders: use background with padding-box and border-box clipping, or the border-image property with a gradient value. Mesh gradients: layer multiple radial gradients with different positions and colors. Use a container with background: multiple gradients separated by commas — each can have different size, position, and blend. Noise texture overlay: combine a CSS gradient with an SVG filter or a semi-transparent noise image to add organic texture. Dark-mode adaptive gradients: use CSS custom properties inside gradient functions so the gradient adapts when the theme changes.

Performance and best practices

CSS gradients are GPU-composited and perform well in most cases. However, very complex gradients (many stops, large areas, animated gradients) can cause repaints. Avoid animating gradients with CSS transitions on background-image — browsers cannot interpolate between gradients natively. Instead, animate with @property (CSS Houdini) which can register typed custom properties. For large gradient areas (full-page backgrounds), using will-change: background or promoting the element to a compositing layer can improve scroll performance. Always test gradient accessibility: text over gradient backgrounds must maintain WCAG contrast at every point of the gradient, not just the average.

Frequently Asked Questions