Tailwind CSS gradients—whether you're building a website, designing a spaceship, or creating your cat new blog, these gradients will take your design to infinity. Just copy-paste these beauties—no design degree required! Not a single one is ugly, we promise. These gradients will not judge you for not knowing what 'color theory' is. Just drag, drop, and voilà—you are suddenly a design genius.
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-green-500 to-green-700
bg-gradient-to-r from-blue-500 to-blue-700
bg-gradient-to-r from-yellow-400 to-yellow-600
bg-gradient-to-r from-red-500 to-red-700
bg-gradient-to-r from-purple-400 to-purple-600
bg-gradient-to-r from-blue-600 to-blue-800
bg-gradient-to-r from-blue-400 to-blue-600
bg-gradient-to-r from-yellow-500 to-yellow-700
bg-gradient-to-r from-red-600 to-red-800
bg-gradient-to-r from-red-400 to-red-600
bg-gradient-to-r from-blue-500 to-blue-700
bg-gradient-to-r from-gray-300 to-gray-500
bg-gradient-to-r from-green-400 to-green-600
bg-gradient-to-r from-blue-700 to-blue-900
bg-gradient-to-r from-orange-400 to-orange-600
bg-gradient-to-r from-teal-400 to-teal-600
bg-gradient-to-r from-purple-300 to-purple-500
bg-gradient-to-r from-gray-800 to-gray-900
bg-gradient-to-r from-red-500 to-red-700
bg-gradient-to-r from-white to-gray-100
bg-gradient-to-r from-yellow-400 to-yellow-600
bg-gradient-to-r from-gray-600 to-gray-800
bg-gradient-to-r from-orange-300 to-orange-500
bg-gradient-to-r from-indigo-500 to-indigo-700
bg-gradient-to-r from-cyan-400 to-cyan-600
bg-gradient-to-r from-teal-300 to-teal-500
bg-gradient-to-r from-yellow-300 to-yellow-500
bg-gradient-to-r from-purple-500 to-purple-700
bg-gradient-to-r from-gray-500 to-gray-700
bg-gradient-to-r from-pink-400 to-pink-600
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
bg-gradient-to-r from-blue-400 to-indigo-600
bg-gradient-to-r from-pink-300 to-purple-500
bg-gradient-to-r from-purple-300 to-pink-500
bg-gradient-to-r from-green-400 to-teal-500
bg-gradient-to-r from-red-400 to-yellow-400
bg-gradient-to-r from-lime-300 to-green-400
bg-gradient-to-r from-cyan-400 to-blue-500
bg-gradient-to-r from-teal-300 to-blue-400
bg-gradient-to-r from-gray-400 to-gray-600
bg-gradient-to-r from-yellow-400 to-yellow-500
bg-gradient-to-r from-purple-500 to-blue-600
bg-gradient-to-r from-orange-400 to-pink-500
bg-gradient-to-r from-red-600 to-brown-400
bg-gradient-to-r from-sky-300 to-blue-400
bg-gradient-to-r from-rose-300 to-rose-500
bg-gradient-to-r from-yellow-300 to-orange-400
bg-gradient-to-r from-teal-200 to-teal-400
bg-gradient-to-r from-blue-200 to-blue-400
bg-gradient-to-r from-indigo-500 to-purple-600
bg-gradient-to-r from-blue-300 to-blue-500
bg-gradient-to-r from-purple-200 to-purple-400
bg-gradient-to-r from-yellow-200 to-yellow-400
bg-gradient-to-r from-green-200 to-green-400
bg-gradient-to-r from-gray-300 to-gray-500
bg-gradient-to-r from-pink-200 to-pink-400
bg-gradient-to-r from-cyan-200 to-cyan-400
bg-gradient-to-r from-red-200 to-red-400
bg-gradient-to-r from-orange-200 to-orange-400
bg-gradient-to-r from-green-300 to-green-500
bg-gradient-to-r from-rose-200 to-rose-400
bg-gradient-to-r from-teal-200 to-teal-400
bg-gradient-to-r from-gray-400 to-gray-600
bg-gradient-to-r from-yellow-100 to-yellow-300
bg-gradient-to-r from-green-100 to-green-300
bg-gradient-to-r from-sky-200 to-sky-400
bg-gradient-to-r from-purple-100 to-purple-300
bg-gradient-to-r from-red-100 to-red-300
bg-gradient-to-r from-yellow-100 to-yellow-200
bg-gradient-to-r from-blue-600 to-blue-800
bg-gradient-to-r from-purple-500 to-purple-700
bg-gradient-to-r from-yellow-500 to-yellow-700
bg-gradient-to-r from-green-600 to-green-800
bg-gradient-to-r from-gray-500 to-gray-700
bg-gradient-to-r from-red-600 to-red-800
bg-gradient-to-r from-orange-400 to-orange-600
bg-gradient-to-r from-teal-500 to-teal-700
bg-gradient-to-r from-pink-500 to-pink-700
bg-gradient-to-r from-cyan-500 to-cyan-700
bg-gradient-to-r from-orange-300 to-orange-500
bg-gradient-to-r from-indigo-500 to-indigo-700
bg-gradient-to-r from-purple-300 to-purple-500
bg-gradient-to-r from-yellow-400 to-yellow-600
bg-gradient-to-r from-green-400 to-green-600
bg-gradient-to-r from-red-500 to-red-700
bg-gradient-to-r from-blue-400 to-blue-600
bg-gradient-to-r from-rose-400 to-rose-600
bg-gradient-to-r from-yellow-300 to-orange-400
bg-gradient-to-r from-blue-200 to-blue-400
bg-gradient-to-r from-red-400 to-red-600
bg-gradient-to-r from-teal-300 to-teal-500
bg-gradient-to-r from-pink-300 to-pink-500
bg-gradient-to-r from-indigo-400 to-indigo-600
bg-gradient-to-r from-green-300 to-green-500
bg-gradient-to-r from-purple-300 to-purple-500
bg-gradient-to-r from-orange-400 to-yellow-500
bg-gradient-to-r from-blue-300 to-purple-400
bg-gradient-to-r from-gray-300 to-gray-500
bg-gradient-to-r from-yellow-400 to-brown-400
bg-gradient-to-r from-cyan-400 to-blue-500
bg-gradient-to-r from-rose-300 to-rose-500
bg-gradient-to-r from-green-500 to-green-700
bg-gradient-to-r from-pink-400 to-orange-400
bg-gradient-to-r from-blue-500 to-indigo-500
bg-gradient-to-r from-yellow-500 to-orange-300
bg-gradient-to-r from-green-200 to-green-400
bg-gradient-to-r from-gray-200 to-gray-400
bg-gradient-to-r from-yellow-300 to-yellow-500
bg-gradient-to-r from-red-400 to-red-600
bg-gradient-to-r from-green-400 to-green-600
bg-gradient-to-r from-purple-300 to-purple-500
bg-gradient-to-r from-teal-300 to-teal-500
bg-gradient-to-r from-pink-400 to-pink-600
bg-gradient-to-r from-yellow-400 to-orange-400
bg-gradient-to-r from-green-200 to-green-400
bg-gradient-to-r from-orange-300 to-yellow-500
bg-gradient-to-r from-green-400 to-pink-400
bg-gradient-to-r from-yellow-200 to-white
bg-gradient-to-r from-red-500 to-brown-500
bg-gradient-to-r from-red-600 to-purple-500
bg-gradient-to-r from-purple-200 to-purple-400
bg-gradient-to-r from-yellow-300 to-brown-300
bg-gradient-to-r from-white to-yellow-100
bg-gradient-to-r from-teal-400 to-green-400
bg-gradient-to-r from-pink-400 to-red-500
bg-gradient-to-r from-yellow-50 to-yellow-200
bg-gradient-to-r from-yellow-300 to-yellow-500
bg-gradient-to-r from-blue-400 to-indigo-500
bg-gradient-to-r from-orange-300 to-pink-300
bg-gradient-to-r from-green-300 to-green-500
bg-gradient-to-r from-red-400 to-pink-500
bg-gradient-to-r from-yellow-200 to-yellow-300
bg-gradient-to-r from-white to-teal-200
bg-gradient-to-r from-gray-900 to-gray-700
bg-gradient-to-r from-yellow-300 to-purple-300
bg-gradient-to-r from-orange-400 to-yellow-400
bg-gradient-to-r from-red-500 to-pink-400
bg-gradient-to-r from-green-400 to-green-600
bg-gradient-to-r from-pink-300 to-orange-300
bg-gradient-to-r from-yellow-200 to-yellow-400
bg-gradient-to-r from-purple-300 to-pink-500
bg-gradient-to-r from-yellow-50 to-purple-400
bg-gradient-to-r from-yellow-200 to-orange-200
bg-gradient-to-r from-gray-800 to-gray-900
bg-gradient-to-r from-pink-300 to-pink-500
bg-gradient-to-r from-blue-400 to-blue-600
bg-gradient-to-r from-red-500 to-red-700
bg-gradient-to-r from-green-500 to-green-700
bg-gradient-to-r from-purple-300 to-purple-500
bg-gradient-to-r from-gray-300 to-gray-500
bg-gradient-to-r from-orange-400 to-red-400
bg-gradient-to-r from-blue-700 to-blue-800
bg-gradient-to-r from-yellow-400 to-yellow-500
bg-gradient-to-r from-white to-gray-100
bg-gradient-to-r from-orange-500 to-red-500
bg-gradient-to-r from-gray-400 to-gray-600
bg-gradient-to-r from-teal-300 to-teal-500
bg-gradient-to-r from-yellow-200 to-yellow-300
bg-gradient-to-r from-gray-700 to-gray-900
bg-gradient-to-r from-cyan-400 to-cyan-600
bg-gradient-to-r from-purple-400 to-purple-600
bg-gradient-to-r from-gray-300 to-gray-500
bg-gradient-to-r from-pink-500 to-pink-700
bg-gradient-to-r from-red-400 to-yellow-400
bg-gradient-to-r from-pink-300 to-purple-500
bg-gradient-to-r from-indigo-400 to-blue-600
bg-gradient-to-r from-yellow-300 to-orange-400
bg-gradient-to-r from-green-300 to-green-500
bg-gradient-to-r from-rose-300 to-rose-500
bg-gradient-to-r from-teal-400 to-blue-500
bg-gradient-to-r from-green-400 to-green-700
bg-gradient-to-r from-orange-300 to-red-400
bg-gradient-to-r from-blue-200 to-blue-400
bg-gradient-to-r from-orange-200 to-pink-300
bg-gradient-to-r from-red-500 to-yellow-500
bg-gradient-to-r from-blue-500 to-indigo-600
bg-gradient-to-r from-purple-300 to-purple-500
bg-gradient-to-r from-pink-400 to-yellow-400
bg-gradient-to-r from-indigo-500 to-blue-500
bg-gradient-to-r from-orange-400 to-red-500
bg-gradient-to-r from-white to-blue-100
bg-gradient-to-r from-teal-300 to-cyan-400
bg-gradient-to-r from-yellow-200 to-yellow-400
bg-gradient-to-r from-green-200 to-green-400
bg-gradient-to-r from-red-600 to-red-800
bg-gradient-to-r from-blue-500 to-green-500
bg-gradient-to-r from-orange-400 to-brown-500
bg-gradient-to-r from-yellow-300 to-orange-300
bg-gradient-to-r from-blue-700 to-indigo-800
bg-gradient-to-r from-teal-400 to-blue-500
bg-gradient-to-r from-gray-500 to-gray-700
bg-gradient-to-r from-purple-200 to-gray-400
bg-gradient-to-r from-orange-200 to-orange-400
bg-gradient-to-r from-gray-600 to-gray-800
bg-gradient-to-r from-yellow-400 to-red-400
bg-gradient-to-r from-blue-300 to-indigo-600
bg-gradient-to-r from-purple-500 to-indigo-700
bg-gradient-to-r from-black to-blue-800
bg-gradient-to-r from-white to-blue-200
bg-gradient-to-r from-gray-400 to-brown-400
bg-gradient-to-r from-yellow-300 to-white
bg-gradient-to-r from-purple-300 to-pink-500
bg-gradient-to-r from-blue-500 to-teal-500
bg-gradient-to-r from-black to-gray-900
bg-gradient-to-r from-blue-200 to-blue-400
bg-gradient-to-r from-pink-400 to-red-500
bg-gradient-to-r from-green-300 to-green-500
bg-gradient-to-r from-blue-300 to-gray-400
bg-gradient-to-r from-purple-300 to-yellow-400
bg-gradient-to-r from-yellow-300 to-orange-400
bg-gradient-to-r from-red-400 to-orange-500
bg-gradient-to-r from-orange-300 to-yellow-500
bg-gradient-to-r from-green-500 to-yellow-300
bg-gradient-to-r from-orange-500 to-red-600
bg-gradient-to-r from-gray-300 to-gray-500
bg-gradient-to-r from-red-600 to-green-600
bg-gradient-to-r from-pink-200 to-green-300
bg-gradient-to-r from-yellow-400 to-cyan-400
bg-gradient-to-r from-orange-400 to-brown-500
bg-gradient-to-r from-white to-blue-200
bg-gradient-to-r from-red-500 to-gold-400
bg-gradient-to-r from-green-400 to-yellow-400
bg-gradient-to-r from-green-500 to-brown-300
bg-gradient-to-r from-purple-400 to-blue-600