Choose between Linear or Radial gradient type from the Gradient Settings card.

Adjust the direction slider (for linear gradients) to control the angle of the gradient flow.

Add color stops using the Add Color button. Each stop defines a color at a specific position (0-100%).

Pick colors using the color picker and drag sliders to set each stop's position along the gradient.

Use preset gradients for quick inspiration, or switch preview shapes to see how the gradient looks in different formats.

Copy the generated CSS code and paste it into your stylesheet or inline style.

Note

Linear gradients flow in a straight line at the set angle, while radial gradients spread outward from a center point. For best results, ensure your color stops have sufficient contrast and use 2-4 stops for clean, smooth gradients.