Design stunning CSS gradients with a real-time visual preview. Create linear, radial, and conic gradients, adjust color stops, angles, and directions, then copy the generated CSS code directly into your project.
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
Design stunning CSS gradients with a real-time visual preview. Create linear, radial, and conic gradients, adjust color stops, angles, and directions, then copy the generated CSS code directly into your project.
Choose a gradient type
Select linear, radial, or conic gradient from the type selector.
Set your colors
Click on the gradient bar to add color stops, then pick colors for each stop using the color picker.
Adjust angle and position
Use the angle control or drag on the preview to set the gradient direction. For radial gradients, adjust the shape and position.
Preview the result
Watch the live preview update in real time as you fine-tune your gradient.
Copy the CSS
Click the copy button to copy the generated CSS gradient code to your clipboard.