Advertisement
CSS Gradient Generator – Linear & Radial Gradients
Design linear and radial CSS gradients visually with multiple color stops. Adjust angle, position, and colors — copy the CSS code instantly.
CSS Gradient Generator
Drag the circles to move colors
Color 1
#6366F1
Color 2
#A855F7
background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);Paste this into your website's CSS file to apply the gradient.
What is CSS Gradient Generator?
Visual editor for CSS linear and radial gradients. Add up to 5 color stops, drag to reposition, and adjust angle or radial center point. Outputs clean, copy-ready CSS background declarations.
CSS Gradient Generator Features
Up to 5 Color Stops
Add, remove, and reposition stops with sliders.
Linear & Radial Modes
Switch between gradient types with one click.
Angle Control
Dial in precise angle for linear gradients (0–360°).
Copy-Ready Output
Clean CSS background declaration, ready to paste.
Advertisement
CSS Gradient Generator FAQ
Click 'Add Stop' to insert up to 5 color points. Drag each stop's slider to reposition it along the gradient axis.
Linear gradients transition colors along a straight line at a specified angle. Radial gradients radiate outward from a center point in a circular or elliptical pattern.
Set one of your color stops to a color with 0% alpha (fully transparent), such as rgba(0,0,0,0). This creates a fade-to-transparent effect.
Yes — apply the gradient to the background, then use background-clip: text and -webkit-text-fill-color: transparent. The output from this tool can be used for text gradients with that technique.