Tailwind CSS Color Gradient Generator

Add Gradient Stops:

• Click Add Stop to add new color stops.
• Adjust the color using the color picker and set the position (0-100%) using the number input.

Choose Gradient Direction:

• Use the Direction dropdown to select a gradient direction (e.g., Left to Right).
• Select Custom Angle for more control, and enter the angle in degrees.

Preview Gradient:

• View your gradient in real-time in the Preview section.
• Adjust the size of the preview with the Preview Size slider.

Copy CSS Code:

• The CSS code for your gradient is displayed under CSS Code.
• Click Copy CSS to copy the code to your clipboard.

Copy Tailwind Class:

• The Tailwind class for your gradient is displayed under Tailwind Class.
• Click Copy Tailwind to copy the class to your clipboard.

Use Presets:

• Select a preset from the Presets dropdown to quickly apply popular gradients.

Generate Random Gradient:

• Click Random to generate a random gradient.

Complementary Gradient:

• Click Complementary to create a gradient with complementary colors.

Reset:

• Click Reset to clear all stops and settings.

Export as SVG:

• Click Download SVG to export the gradient as an SVG file.