CSS Gradient Generator

CSS gradients explained

CSS gradients are a powerful feature that allows you to create smooth transitions between two or more colors without using image files. They reduce HTTP requests, scale perfectly at any resolution, are easily modified in code, and support transparency. CSS defines three types of gradients: linear, radial, and conic.

A linear gradient transitions colors along a straight line at a specified angle. linear-gradient(90deg, #FF5733, #3498DB) creates a left-to-right gradient from orange to blue. An radial gradient radiates outward from a center point in an ellipse or circle. radial-gradient(circle, #FF5733, #3498DB) creates a circular burst from center. A conic gradient rotates colors around a center point like a color wheel. conic-gradient(from 0deg, red, yellow, green, blue, red) creates a full-color wheel.

All three gradient types support multiple color stops with optional positions: linear-gradient(90deg, red 0%, blue 50%, green 100%). Stops without positions are evenly distributed. Modern CSS also supports oklch() and color-mix() for more perceptually uniform gradients with better color interpolation.

Common mistakes

• Gradient flashing through gray — When interpolating between two colors in opposite hue positions in sRGB, the transition passes through gray. Use in oklch interpolation for more vivid gradients.
• No fallback for older browsers — Always specify a solid background color before the gradient as a fallback for browsers that might not support complex gradient syntax.

You might also need