CSS Gradient Generator

CSS gradients let you create smooth transitions between two or more colors. They replace images for backgrounds, buttons, and decorative elements, reducing HTTP requests and enabling dynamic, scalable designs. The three main types are linear-gradient, radial-gradient, and conic-gradient.

Linear gradients transition along a straight line at a specified angle. Radial gradients emanate from a center point in a circular or elliptical shape. Conic gradients sweep colors around a center point, ideal for pie charts, color wheels, and angular effects.

Apply gradients with the background or background-image property. For example: background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); creates a diagonal purple gradient. You can layer multiple gradients, combine them with background-size and background-position, and use them with border-image or mask-image for creative effects.

Best practice: always specify at least two color stops. Use percentage or pixel positions to control where each color appears. Add more stops for complex, multi-color transitions.

Linear and radial gradients are supported in all modern browsers. Conic gradients gained full support in Chrome 69+, Firefox 83+, and Safari 12.1+. For older browsers, provide a solid fallback: background: #667eea; background: linear-gradient(...); The gradient will override the solid color where supported.

Vendor prefixes (-webkit-linear-gradient, -moz-linear-gradient) were needed for older Safari and Firefox but are rarely necessary today. Use Autoprefixer or similar tools if you need to support very old browsers.

Gradients are rendered by the browser's compositor and are generally very performant — no image decoding or network requests. For best performance, avoid animating gradient properties (background, background-image) as they trigger layout/paint. Prefer animating opacity or transform instead.

For complex gradients with many stops, test on lower-end devices. Consider using CSS custom properties (variables) to make gradients themeable without duplicating code.