What is a CSS gradient?
A CSS gradient is a smooth transition between two or more colors, drawn by the browser instead of loaded as an image. Because gradients are generated on the fly, they are sharp at any screen size, weigh almost nothing and can be changed with a single line of code. They are used for hero backgrounds, buttons, cards, overlays on photos and subtle depth effects.
- Linear gradients blend along a straight line at any angle.
- Radial gradients spread outwards from a center point as a circle or ellipse.
- Conic gradients sweep around a center point, like a color wheel or pie chart.
How to use the gradient generator
- Choose a gradient type.
- Set the angle for linear and conic gradients, or the shape and center for radial ones.
- Adjust the color stops: pick each color and drag its position. Add or remove stops as needed.
- Tick repeating for stripes and patterns, or press Random for ideas.
- Copy the CSS and paste it into your stylesheet.
The CSS it produces
background: #4f46e5;
background: linear-gradient(135deg, #4f46e5 0%, #a855f7 50%, #10b981 100%);
The first line is a solid fallback color for very old browsers and for situations where the gradient cannot be drawn. Angles follow the CSS convention: 0deg points up, 90deg points right and 180deg points down. Gradients work on any property that accepts an image, including background-image, border-image and mask-image.
Design tips
- Neighboring hues (for example indigo to violet) blend more smoothly than opposites, which can create a muddy gray middle.
- Keep text readable: check the contrast of your text against both ends of the gradient.
- Subtle gradients with two similar shades often look more premium than bold rainbows.
- Place two stops at the same position to create a hard edge instead of a blend.
More worked examples
Hard stripes: placing two stops at the same position, such as #4f46e5 50%, #10b981 50%, creates a sharp edge instead of a blend.
Common mistakes to avoid
- Blending opposite hues. Complementary colors can create a muddy gray middle; add a third stop.
- Ignoring text contrast. Check readability against both ends of the gradient.
- Leaving out a fallback color. The generated CSS includes one. Pick harmonious colors with the color palette generator.
Sources and methodology
The calculations on this page follow these published standards and references. The code is covered by automated tests against known values.