CSS Gradient Generator
Create beautiful CSS gradients with live preview. Linear and radial gradients with multiple color stops.
background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);
About CSS Gradient Generator
Create CSS gradients visually with real-time preview. Choose linear or radial gradient type. Add unlimited color stops, drag to reorder, and adjust position percentages and opacity for each. For linear gradients, set the angle (0–360°) or choose a direction preset. Copy the ready-to-use CSS background or background-image property. Perfect for hero sections, buttons, cards, and modern UI backgrounds.
All processing happens entirely in your browser using modern web APIs. Nothing is uploaded to our servers — your data stays local and private. Free to use forever.
Common use cases
- Creating hero section backgrounds with smooth multi-color gradients
- Designing gradient buttons and call-to-action elements
- Generating text gradients (with background-clip: text) for headings
- Building gradient borders using background-image on pseudo-elements
- Creating mesh or noise-style gradients for modern landing pages
How it works
Maintains an ordered array of color stops (position %, color, opacity). For linear gradients, generates: linear-gradient(${angle}deg, ${stops.map(s => s.color + " " + s.position + "%").join(", ")}). For radial gradients: radial-gradient(circle, ...). The preview div applies the generated CSS in real time.