Gradient Settings
Configure colors and direction
0%
100%
Preset Gradients
Quick-select a gradient template
Preview
#667eea @ 0%
#764ba2 @ 100%
CSS
Generated Code
CSS code will appear here
Create CSS gradients by adding color stops, adjusting their positions, and setting the direction. Linear gradients flow in a straight line, while radial gradients spread outward from a center point. Copy the generated CSS and paste it into your stylesheet.