Tailwind Gradient Generator
Create custom CSS gradients visually and export as Tailwind CSS config — compatible with Tailwind CSS v3 & v4
- Home
- > Tailwind >
- Gradient Generator
Gradient Controls
Preview
Tailwind class: bg-gradient-custom
Color Stops
tailwind.config.js (backgroundImage)
CSS Fallback
HTML Usage
What is a Tailwind Gradient Generator?
A Tailwind gradient generator lets you visually build CSS gradients and export them as Tailwind CSS configuration code. Choose from linear or radial gradients, set custom colors at specific positions, and instantly see the result. Copy the generated tailwind.config.js snippet or CSS fallback with one click.
How to Use This Generator
- Choose gradient type — Linear or radial. Adjust direction or angle for linear, shape and position for radial.
- Add color stops — Click + Add Stop to add colors. Use the color picker and position slider to fine-tune each stop. Minimum 2 stops, maximum 8.
- Reorder stops — Use the up/down buttons to rearrange your color stops.
- Preview live — The gradient preview bar updates in real time as you adjust controls.
- Copy the code — Copy the Tailwind config, CSS fallback, or HTML usage with one click.
