CSS Gradient Generator
Generate linear and radial CSS gradients with color stops, angle control, live preview, and copyable output.
Build a CSS background gradient from type, angle, and color stops. Use CSS color values only, preview the result locally, and copy the generated declaration for your stylesheet.
Use CSS color values such as #2162eb, rgb(...), oklch(...), currentColor, or a custom property. Do not paste a full CSS declaration into a color stop.
How it works
Gradient type chooses whether the output uses linear-gradient or radial-gradient. Linear gradients blend colors along a direction, while radial gradients blend outward from the center.
Angle controls the direction for linear gradients. It is included as degrees in the generated CSS and ignored for radial gradients.
Color stop 1 and Color stop 2 are required. The optional third color stop is included only when you enter a color for it. Each stop needs a numeric position from 0% to 100%.
Position % places each color stop between the start and end of the gradient. The generated CSS sorts stops by position, so an optional 50% stop is placed between 0% and 100%.
The preview applies the generated background locally, and the CSS output gives you a copyable background declaration. Custom properties must be defined in your target page before a pasted gradient can resolve them.
The tool does not validate every possible CSS color token, so test generated declarations in your target browser and design system. Your inputs stay in the browser; do not paste sensitive design tokens into any web tool unless you trust the device and page context you are using.
