Create polished Tailwind gradients with instant copy-paste output.
Switch between linear and radial modes, pick only standard Tailwind colors, and generate beautiful gradients with a luxury interface built for modern UI workflows.
Next.js Image optimized
Designed to rank for Tailwind CSS gradient generator, copy-paste Tailwind code, and UI design tool searches.
Cyan 400
#22d3ee
Blue 500
#3b82f6
Violet 400
#a78bfa
Use one-click copy to paste the generated Tailwind class into your project.
Realtime gradient canvas
bg-gradient-to-r from-cyan-400 via-violet-400 to-blue-500
Adjust the controls to instantly update the background gradient and generate the correct Tailwind utility class.
Generated colors
Primary
Cyan 400
#22d3ee
Secondary
Blue 500
#3b82f6
Third
Violet 400
#a78bfa
Selected gradient cards
Ocean Breeze
Hex: #22d3ee → #3b82f6
bg-gradient-to-r from-cyan-400 to-blue-500
Sunset Glow
Hex: #fb7185 → #f59e0b
bg-gradient-to-r from-rose-400 to-amber-400
Forest Dawn
Hex: #10b981 → #84cc16
bg-gradient-to-r from-emerald-500 to-lime-400
Lavender Dreams
Hex: #a78bfa → #ec4899
bg-gradient-to-r from-violet-400 to-fuchsia-500
Golden Hour
Hex: #f59e0b → #f97316
bg-gradient-to-r from-amber-400 to-orange-500
Deep Ocean
Hex: #0ea5e9 → #1d4ed8
bg-gradient-to-r from-sky-500 to-blue-700