What is a CSS gradient?
Create layered linear, radial, and conic gradients with draggable color stops, blend modes, and export-ready CSS.
A CSS gradient is an image generated by the browser from a smooth transition between colors. Because it is computed at render time, it scales to any size without pixelation and does not require image files.
Gradients come in three types: linear (direction or angle), radial (circle or ellipse from a center), and conic (a sweep around a center). Each gradient is defined by color stops; every stop can include a position and alpha to control how the colors blend.
Multiple gradients can be layered by separating them with commas in background-image, and you can combine them with background-blend-mode for richer textures. CSS also supports different interpolation color spaces, such as oklch, for smoother perceptual transitions.
- Linear gradients are great for lighting and directional depth.
- Radial and conic gradients are useful for spotlights, rings, and color wheels.
- Adjust stop positions to sharpen or soften transitions.