CSS Gradient Generator

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

CSS Gradient Types

CSS offers three gradient functions. linear-gradient() transitions colors along a straight line defined by an angle. radial-gradient() radiates colors outward from a center point in a circular or elliptical shape. conic-gradient() sweeps colors around a center point like a pie chart. All three accept multiple color stops and produce resolution-independent backgrounds that scale to any element size.

Color Stops and Positioning

Each color in a gradient occupies a position from 0% to 100% along the gradient line. When you omit positions, the browser distributes colors evenly. Specifying positions gives you control over the transition: placing two adjacent stops at the same percentage creates a hard edge instead of a smooth blend. This technique produces striped and stepped gradients. Need to convert color values between hex, RGB, and HSL for your stops? Use the Color Converter. For layering gradients with other CSS effects, try the CSS Box Shadow Generator.

Linear Gradient Angles

0deg points upward. 90deg points right. 180deg points down. Keyword directions also work: to right, to bottom left. A 45-degree gradient travels from the bottom-left corner toward the top-right corner. The angle rotates clockwise from the top.

Gradients as Background Images

CSS gradients are computed images, not colors. They go in background-image (or the background shorthand), not background-color. This means you can layer gradients with other background images using comma separation: background: linear-gradient(...), url(image.jpg).

Performance and Browser Support

All modern browsers have supported CSS gradients since 2013. No vendor prefixes are needed. Gradients are GPU-accelerated and perform well even on complex designs. Unlike image files, gradients add zero network requests — the browser generates them from the CSS value at render time. This makes them ideal for decorative backgrounds on performance-sensitive pages.