Skip to main content

CSS Gradient Generator

Create beautiful CSS gradients visually with real-time preview.

Preview

CSS Code

background: linear-gradient(90deg, #3498db 0%, #e74c3c 100%);

Direction

deg

→

Color Stops

%

%

🎨 Tips

• Drag the direction slider to change gradient angle
• Click on color boxes to pick colors
• Adjust position to control where colors appear
• Add multiple colors for complex gradients
• Copy CSS code to use in your project