CSS Gradient Generator Guide

This tool helps you create CSS gradients visually. You can:

• Choose gradient type (linear/radial)
• Add multiple color stops
• Adjust angle for linear gradients
• Adjust position for radial gradients
• Copy generated CSS code
• Preview gradient in real-time

Usage

1. Select gradient type (linear or radial)
2. For linear gradients:
   • Drag the blue dot on the angle picker to adjust the gradient angle
   • Or enter a specific angle value (0-360 degrees)
3. For radial gradients:
   • Select the gradient center position (center, top, right, bottom, left)
4. Manage colors:
   • Click "+" to add a new color (up to 5 colors)
   • Use the color picker to choose colors
   • Drag the slider to adjust color position
   • Click "Remove" to delete a color (minimum 2 colors)
5. Copy the generated code in CSS or Tailwind CSS format

Tips

• Use at least 2 colors for basic gradients
• Add more colors for complex gradients
• Common angles:
  • 0° = bottom to top
  • 90° = left to right
  • 180° = top to bottom
  • 270° = right to left
• Try radial gradients for circular effects