Web Design
CSS Gradient Generator
Linear / Radial / Conic — live preview
🔒 See this tool’s privacy notes for local processing and external service details. Site analytics are described in our privacy policy.
Quick guide
What can CSS Gradient Generator help you do?
Free CSS gradient generator. Linear, radial, and conic gradients with custom angle, color stops, and presets. Live preview and one-click CSS copy.
Best for
Use this to compare linear, circular radial, and conic gradients while adjusting colors, stop positions, and angles. It produces one CSS background declaration, not a downloadable image. There are no opacity controls, text-contrast measurements, or controls for an arbitrary gradient center.
How to use it
Start from the default 90-degree linear gradient with stops at 0% and 100%, or select a preset. Change colors and positions, add stops, or switch type; at least two stops remain. Angles move in five-degree steps and are hidden for radial gradients.
How to read the result
Stops are sorted by percentage before generating CSS, independently of their input-row order. Radial output uses circle, while conic output fixes the center at 50% 50%. Copied text includes background: and a semicolon; inspect it again on the actual element dimensions.
Privacy and limits
The browser creates the preview and CSS directly without sending color choices to an image service or storing design history. Copy writes the declaration to your system clipboard and may depend on browser permissions; the visible code can also be selected manually.
Stop positions are limited to integers from zero through 100: values outside that range are clamped, fractional parts are discarded, and blank input previews as zero. The preview shows only a background, so separately check text legibility and appearance within your actual layout.
Frequently Asked Questions
What is a conic gradient?
Colors rotate around a center point. Great for pie charts and progress rings.
Radial vs linear?
Linear transitions end-to-end; radial spreads from center outward.
Browser support?
Linear/radial: all modern. Conic: Chrome 69+, Safari 12.1+, Firefox 83+.