CSS Gradient Generator

CSS gradients create smooth transitions between two or more colors without requiring image files, reducing HTTP requests and allowing the gradient to scale perfectly at any resolution. Linear gradients transition along a straight line (at any angle), radial gradients emanate from a central point outward, and conic gradients rotate around a center point. All three are defined as values for the background-image property.

Color stops control the position of each color in the gradient. Without explicit positions, colors are distributed evenly. With explicit positions, you can create hard transitions (two stops at the same position), uneven color bands, and complex patterns. The hint value between stops specifies where the midpoint of the transition falls, giving you fine control over how quickly colors blend.

Gradients interpolated in RGB or HSL can produce unexpectedly dull or unsaturated midpoints when transitioning between colors on opposite sides of the hue wheel. Specifying the color space for interpolation (using in oklch or in lab in modern CSS) produces more vibrant transitions. For gradient generation, the OKLCH color space is particularly useful because its perceptual uniformity ensures the midpoint of the gradient looks visually centered between the two endpoint colors.