CSS Gradient Generator

A CSS gradient lets you create smooth transitions between two or more colors. Gradients can be linear (going in a straight line) or radial (radiating from a central point).

This tool features:

• Visual editor — Adjust colors and positions with real-time preview.
• Linear & radial — Switch between gradient types with custom angles and shapes.
• Multiple color stops — Add as many color stops as you need with precise position control.
• Preset gradients — Start from beautiful preset color combinations.
• CSS output — Copy the generated CSS code directly to your clipboard.

1. Choose gradient type — Select Linear or Radial gradient. For linear, adjust the angle. For radial, choose shape and position.
2. Configure color stops — Click each color swatch to change colors. Drag the slider or enter a value to adjust position. Click Add Stop to add more colors.
3. Copy the CSS — Click Copy CSS to copy the generated code. Use it in your stylesheet as a background property.