Build beautiful linear and radial gradients with a live preview. Add color stops, adjust the angle or position, and copy the ready-to-use CSS in one click.
A CSS gradient is a type of image created purely with CSS that transitions smoothly between two or more colors. They are defined using the linear-gradient() or radial-gradient() functions and can be used anywhere an image value is accepted — such as in background, background-image, or border-image properties. No image files are needed, making gradients lightweight and perfectly scalable.
A linear gradient transitions colors along a straight line at a specified angle — for example, from top to bottom, left to right, or diagonally. A radial gradient transitions colors outward from a central point in a circular or elliptical pattern. Use linear for directional and striped designs; use radial for spotlight effects, glows, or circular color bursts.
Use a color with an alpha channel as one of your color stops. For example, rgba(0,0,0,0) for transparent black, or the CSS keyword transparent. In the hex input you can type an 8-digit hex value like #00000000. This technique is popular for creating fade-to-transparent overlays on top of images or videos.
Support is limited. Modern email clients — Apple Mail, newer Outlook for Mac, and Gmail in browsers — render CSS gradients correctly. However, classic Outlook for Windows (2003–2019) does not support them. Always declare a solid fallback background-color before the gradient declaration so those clients display something meaningful.
Set the gradient type to Linear and use an angle such as 45deg (top-left to bottom-right) or 135deg (top-right to bottom-left). You can type the angle directly, drag the slider, or click one of the arrow preset buttons. The diagonal presets are ↗ (45°), ↘ (135°), ↙ (225°), and ↖ (315°).