Tailwind Gradient Color Palette

Find and use beautiful gradient colors with ready-to-copy Tailwind CSS code

How to Use

  1. Step 1: Install Tailwind CSS in your project:
    npm install tailwindcss @tailwindcss/postcss postcss
  2. Step 2: Click on any color card to copy its Tailwind CSS class
  3. Step 3: Paste the code into your React/Vue/Svelte/Solid elements
<div
    className='bg-gradient-to-br from-[#FFC300]/20 to-purple-500/20'
/>

<div
    className='bg-gradient-to-br from-pink-500/20 to-orange-500/20'
/>

<div
    className='bg-gradient-to-br from-orange-500/20 to-yellow-500/20'
/>

<div
    className='bg-gradient-to-br from-yellow-500/20 to-green-500/20'
/>

<div
    className='bg-gradient-to-br from-blue-200/30 to-purple-300/30'
/>

<div
    className='bg-gradient-to-br from-green-200/30 to-blue-300/30'
/>

<div
    className='bg-gradient-to-br from-yellow-200/30 to-pink-300/30'
/>

<div
    className='bg-gradient-to-br from-indigo-200/30 to-pink-200/30'
/>

<div
    className='bg-gradient-to-br from-[#FF6B6B]/20 to-[#4ECDC4]/20'
/>

<div
    className='bg-gradient-to-br from-[#A06CD5]/20 to-[#6247AA]/20'
/>

<div
    className='bg-gradient-to-br from-[#FF9A00]/20 to-[#FF165D]/20'
/>

<div
    className='bg-gradient-to-br from-[#3EECAC]/20 to-[#EE74E1]/20'
/>

<div
    className='bg-gradient-to-br from-emerald-300/20 to-sky-400/20'
/>

<div
    className='bg-gradient-to-br from-amber-200/20 to-lime-300/20'
/>

<div
    className='bg-gradient-to-br from-rose-200/20 to-indigo-300/20'
/>

<div
    className='bg-gradient-to-br from-teal-200/20 to-amber-200/20'
/>

<div
    className='bg-gradient-to-br from-[#4158D0]/20 to-[#C850C0]/20'
/>

<div
    className='bg-gradient-to-br from-[#0093E9]/20 to-[#80D0C7]/20'
/>

<div
    className='bg-gradient-to-br from-[#8EC5FC]/20 to-[#E0C3FC]/20'
/>

<div
    className='bg-gradient-to-br from-[#FFDEE9]/20 to-[#B5FFFC]/20'
/>

<div
    className='bg-gradient-to-br from-amber-300/20 to-rose-400/20'
/>

<div
    className='bg-gradient-to-br from-orange-300/20 to-red-400/20'
/>

<div
    className='bg-gradient-to-br from-rose-300/20 to-purple-400/20'
/>

<div
    className='bg-gradient-to-br from-yellow-300/20 to-red-300/20'
/>

<div
    className='bg-gradient-to-br from-cyan-300/20 to-blue-400/20'
/>

<div
    className='bg-gradient-to-br from-sky-300/20 to-indigo-400/20'
/>

<div
    className='bg-gradient-to-br from-blue-300/20 to-emerald-400/20'
/>

<div
    className='bg-gradient-to-br from-teal-300/20 to-blue-300/20'
/>

<div
    className='bg-gradient-to-br from-neutral-200/30 to-neutral-300/30'
/>

<div
    className='bg-gradient-to-br from-gray-200/30 to-slate-300/30'
/>

<div
    className='bg-gradient-to-br from-slate-200/30 to-zinc-300/30'
/>

<div
    className='bg-gradient-to-br from-zinc-200/30 to-stone-300/30'
/>

<div
    className='bg-gradient-to-br from-[#D8B5FF]/20 to-[#1EAE98]/20'
/>

<div
    className='bg-gradient-to-br from-[#FFD3A5]/20 to-[#FD6585]/20'
/>

<div
    className='bg-gradient-to-br from-[#5EE7DF]/20 to-[#B490CA]/20'
/>

<div
    className='bg-gradient-to-br from-[#C1FCD3]/20 to-[#A6C1EE]/20'
/>

<div
    className='backdrop-blur-lg bg-white/30 border border-white/30'
/>

<div
    className='backdrop-blur-lg bg-slate-50/30 border border-slate-100/30'
/>

<div
    className='backdrop-blur-lg bg-gray-50/30 border border-gray-100/30'
/>

<div
    className='backdrop-blur-md bg-zinc-50/30 border border-zinc-100/30'
/>

<div
    className='backdrop-blur-xl bg-blue-100/30 border border-blue-200/30'
/>

<div
    className='backdrop-blur-xl bg-purple-100/30 border border-purple-200/30'
/>

<div
    className='backdrop-blur-xl bg-pink-100/30 border border-pink-200/30'
/>

<div
    className='backdrop-blur-xl bg-emerald-100/30 border border-emerald-200/30'
/>

<div
    className='backdrop-blur-xl bg-amber-100/30 border border-amber-200/30'
/>

<div
    className='backdrop-blur-lg bg-gradient-to-br from-white/30 to-gray-200/30 border border-white/30'
/>

<div
    className='backdrop-blur-lg bg-gradient-to-br from-blue-100/30 to-purple-100/30 border border-blue-200/30'
/>

<div
    className='backdrop-blur-lg bg-gradient-to-br from-pink-100/30 to-orange-100/30 border border-pink-200/30'
/>

<div
    className='backdrop-blur-xl bg-white/20'
/>

<div
    className='backdrop-blur-xl bg-blue-100/20  shadow-[0_8px_30px_rgb(0,0,0,0.12)]'
/>

<div
    className='backdrop-blur-xl bg-purple-100/20 border border-purple-200/30 shadow-[0_8px_30px_rgb(0,0,0,0.12)]'
/>