What is a CSS gradient?
A CSS gradient is an image generated by the browser that transitions smoothly between two or more colors. Because it is drawn by CSS instead of loaded as a file, a gradient adds no HTTP request, scales to any size without blurring, and can be changed with a single line of code.
CSS has three gradient functions. linear-gradient() blends colors along a straight line at any angle. radial-gradient() spreads colors outward from a center point in a circle or ellipse. conic-gradient() sweeps colors around a center point, which is useful for color wheels and pie-chart effects.
Gradients are background images, so they are set with background-image (or the background shorthand) and can be layered with other backgrounds.
How to use the CSS Gradient Generator
- Choose a gradient type: linear, radial or conic.
- Set the angle for linear and conic gradients, or the shape and center for radial ones.
- Pick colors for each stop and drag the sliders to position them. Add up to eight stops or start from a preset.
- Copy the CSS and paste it into your stylesheet, an Elementor custom CSS field or a block style.
Example
A diagonal two-color hero background with a solid fallback:
.hero {
background-color: #4f46e5;
background-image: linear-gradient(135deg, #4f46e5 0%, #9333ea 100%);
}Tips for better gradients
- Keep text readable: check contrast against both ends of the gradient, not just the middle.
- Colors that are far apart on the color wheel can produce a muddy grey midpoint. Adding a middle stop with a brighter color avoids it.
- Hard stops (two stops at the same position) create stripes without any images, e.g.
#000 50%, #fff 50%. - Pair a gradient with a box shadow or a glassmorphism card for modern UI surfaces.
Frequently Asked Questions
Do CSS gradients work in all browsers?
Linear and radial gradients work in every current browser without prefixes. Conic gradients are supported in all evergreen browsers released since 2020.
Should I use background or background-image for gradients?
Both work. background-image only sets the image and leaves other background properties alone, which is safer when a fallback background-color is also set.
Why include a fallback color?
If a gradient fails to render — in some email clients or very old browsers — the fallback background-color keeps text readable.
How do I animate a gradient?
Gradient colors cannot be transitioned directly. A common technique is to make the gradient larger than the element with background-size and animate background-position. The CSS Animation Generator can create the keyframes.