CSS Gradient Generator
Build linear, radial and conic CSS gradients with a live preview, two color stops and copyable background CSS.
Set your values
Adjust the values, then calculate your result.
How to use CSS Gradient Generator
- Choose two colors and a gradient type.
- Adjust the stop positions; angle applies to linear and conic gradients.
- Generate a preview and copy the background declaration into your stylesheet.
Understand gradient direction and stops
Linear gradients blend along a line, radial gradients expand outward, and conic gradients rotate around the center. Stop positions determine where each color is anchored. The first stop must not exceed the second. Equal stops create a hard color transition, which can be useful for striped backgrounds.
Use gradients behind readable content
A gradient preview does not check text contrast. Test foreground text against the lightest and darkest portions it touches. Provide a solid background fallback when needed, and keep decorative gradients in CSS rather than exporting an unnecessarily large raster image. The generated snippet uses standard CSS gradient functions.
Why does the angle not affect radial output?
A circular radial gradient has no directional angle. Its center and shape are fixed in this two-color generator.
Is input uploaded?
Processing takes place in your browser. This tool does not send your input or selected files to a conversion API.