Unlock the power of stunning gradients with our 100+ Tailwind CSS Gradients. Mix and match from Tailwind comprehensive color system to create unique, eye-catching gradients.
Our gradients are perfect for a wide range of design elements:
Whether you are a seasoned developer or just starting with Tailwind CSS, our Gradient Generator provides you with the tools to create professional, polished designs quickly and easily.
Browse through our collection of carefully crafted gradients. Click on any gradient to copy its Tailwind CSS classes and start using it in your projects right away!
bg-gradient-to-r from-red-500 to-orange-500
bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500
bg-gradient-to-r from-green-300 via-blue-500 to-purple-600
bg-gradient-to-r from-blue-200 to-cyan-200
bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400
bg-gradient-to-r from-gray-700 via-gray-900 to-black
bg-gradient-to-r from-orange-300 to-rose-500
bg-gradient-to-r from-indigo-500 to-blue-500
bg-gradient-to-r from-yellow-100 via-yellow-300 to-yellow-500
bg-gradient-to-r from-yellow-200 via-green-200 to-green-500
bg-gradient-to-r from-gray-200 via-gray-400 to-gray-600
bg-gradient-to-r from-red-200 via-red-300 to-yellow-200
bg-gradient-to-r from-yellow-200 to-orange-400
bg-gradient-to-r from-teal-200 to-lime-200
bg-gradient-to-r from-purple-300 to-pink-300
bg-gradient-to-r from-indigo-200 via-red-200 to-yellow-100
bg-gradient-to-r from-gray-700 to-gray-900
bg-gradient-to-r from-green-300 to-green-500
bg-gradient-to-r from-red-500 to-purple-500
bg-gradient-to-r from-blue-400 via-teal-500 to-green-400
bg-gradient-to-r from-yellow-400 via-orange-500 to-red-500
bg-gradient-to-r from-green-200 via-green-300 to-blue-500
bg-gradient-to-r from-indigo-300 via-purple-400 to-pink-400
bg-gradient-to-r from-yellow-600 via-red-500 to-pink-500
bg-gradient-to-r from-cyan-500 to-blue-500
bg-gradient-to-r from-purple-900 via-violet-600 to-purple-300
bg-gradient-to-r from-pink-300 via-orange-300 to-yellow-200
bg-gradient-to-r from-indigo-200 via-cyan-400 to-cyan-200
bg-gradient-to-r from-yellow-300 via-orange-300 to-red-300
bg-gradient-to-r from-blue-900 via-purple-900 to-pink-900
bg-gradient-to-r from-green-200 via-teal-200 to-teal-500
bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-300
bg-gradient-to-r from-orange-200 via-orange-300 to-red-300
bg-gradient-to-r from-blue-900 via-blue-700 to-blue-500
bg-gradient-to-r from-lime-200 via-lime-400 to-lime-500
bg-gradient-to-r from-purple-600 via-pink-600 to-blue-600
bg-gradient-to-r from-yellow-600 via-orange-600 to-red-600
bg-gradient-to-r from-blue-100 via-blue-300 to-blue-500
bg-gradient-to-r from-pink-100 via-pink-300 to-pink-500
bg-gradient-to-r from-green-300 via-green-400 to-green-500
bg-gradient-to-r from-yellow-200 via-yellow-400 to-yellow-700
bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500
bg-gradient-to-r from-green-300 via-yellow-300 to-pink-300
bg-gradient-to-r from-blue-100 via-blue-200 to-blue-300
bg-gradient-to-r from-red-200 via-red-300 to-yellow-200
bg-gradient-to-r from-purple-300 via-purple-400 to-purple-500
bg-gradient-to-r from-yellow-200 via-orange-400 to-orange-500
bg-gradient-to-r from-gray-400 via-gray-600 to-blue-800
bg-gradient-to-r from-yellow-500 to-orange-500
bg-gradient-to-r from-purple-700 to-indigo-900
bg-gradient-to-r from-green-600 to-teal-700
bg-gradient-to-r from-gray-800 to-yellow-500
bg-gradient-to-r from-red-700 to-purple-800
bg-gradient-to-r from-blue-600 to-indigo-700
bg-gradient-to-r from-gray-300 to-gray-500
bg-gradient-to-r from-pink-300 to-yellow-200
bg-gradient-to-r from-yellow-200 to-pink-100
bg-gradient-to-r from-orange-600 to-yellow-700
bg-gradient-to-r from-gray-200 to-gray-400
bg-gradient-to-r from-gray-900 to-black
bg-gradient-to-r from-purple-500 to-purple-700
bg-gradient-to-r from-black to-gray-800
bg-gradient-to-r from-red-800 to-purple-900
bg-gradient-to-r from-purple-400 via-pink-500 to-red-500
bg-gradient-to-r from-stone-300 to-stone-500
bg-gradient-to-r from-neutral-400 to-neutral-600
bg-gradient-to-r from-gray-200 to-gray-400
bg-gradient-to-r from-slate-500 to-slate-700
bg-gradient-to-r from-amber-200 to-amber-400
bg-gradient-to-r from-zinc-300 to-zinc-500
bg-gradient-to-r from-lime-200 to-lime-400
bg-gradient-to-r from-neutral-500 to-neutral-700
bg-gradient-to-r from-stone-400 to-stone-600
bg-gradient-to-r from-orange-200 to-orange-400
bg-gradient-to-r from-pink-500 to-yellow-500
bg-gradient-to-r from-green-400 to-blue-500
bg-gradient-to-r from-red-500 to-yellow-500
bg-gradient-to-r from-pink-500 to-purple-500
bg-gradient-to-r from-teal-400 to-green-500
bg-gradient-to-r from-red-500 via-yellow-500 to-blue-500
bg-gradient-to-r from-purple-500 to-red-500
bg-gradient-to-r from-yellow-400 to-orange-500
bg-gradient-to-r from-cyan-500 to-blue-500
bg-gradient-to-r from-green-500 to-lime-500
bg-gradient-to-r from-pink-400 to-pink-600
bg-gradient-to-r from-indigo-500 to-purple-600
bg-gradient-to-r from-red-400 to-orange-500
bg-gradient-to-r from-teal-500 to-cyan-500
bg-gradient-to-r from-green-500 to-teal-500
bg-gradient-to-r from-pink-500 to-red-500
bg-gradient-to-r from-yellow-500 to-green-500
bg-gradient-to-r from-blue-400 to-blue-600
bg-gradient-to-r from-pink-500 to-orange-500
bg-gradient-to-r from-orange-400 to-yellow-500
bg-gradient-to-r from-pink-500 via-purple-500 via-indigo-500 via-blue-500 via-green-500 via-yellow-500 via-red-500 to-pink-500
bg-gradient-to-bl from-fuchsia-500 via-orange-400 via-yellow-300 via-green-200 via-blue-300 via-indigo-400 via-purple-500 to-pink-500
bg-gradient-to-r from-pink-400 via-purple-400 via-blue-400 via-green-400 via-yellow-400 via-red-400 to-pink-400
bg-gradient-to-r from-red-400 via-yellow-400 via-green-400 via-blue-400 via-indigo-400 via-purple-400 via-pink-400 to-red-400
