We have built a new tool to create background and text gradients with Tailwind CSS

Make Tailwind CSS Gradients the Easy Way

Working with Tailwind CSS is awesome, but creating gradients for backgrounds or text can sometimes be a bit tricky. That’s where the Tailwind CSS Gradient Generator comes in! This handy tool helps you design gradients quickly and easily for your projects.

What It Offers

• Background Gradients: Create stunning gradient backgrounds in no time.
• Text Gradients: Add colorful gradient effects to your text effortlessly.
• Supports Tailwind v3: Works seamlessly with the latest version (v4 support coming soon!).
• Copy-Paste Ready: Generate and copy the Tailwind CSS code instantly for easy integration.

Why Use It?

If you want to save time and skip the hassle of manual gradient setup, this tool is for you. It’s simple, fast, and makes your designs pop.

Try It Now

Check out the generator and see how much easier creating gradients can be: Tailwind CSS Gradient Generator.

Comments

[Nabaraj saha]

Nice work I must say. One question how you got all the colours, is there any json data or you copied from tailwind site?

[Michael Andreuzza]

I think is a JSON file actually.

I took this JSON from my other project , hope this works!

export const colorsData = {
  "tailwind": [
    {
      "name": "Slate",
      "colors": [
        "#f8fafc",
        "#f1f5f9",
        "#e2e8f0",
        "#cbd5e1",
        "#94a3b8",
        "#64748b",
        "#475569",
        "#334155",
        "#1e293b",
        "#0f172a",
        "#020617"
      ]
    },
    {
      "name": "Gray",
      "colors": [
        "#f9fafb",
        "#f3f4f6",
        "#e5e7eb",
        "#d1d5db",
        "#9ca3af",
        "#6b7280",
        "#4b5563",
        "#374151",
        "#1f2937",
        "#111827",
        "#030712"
      ]
    },
    {
      "name": "Zinc",
      "colors": [
        "#fafafa",
        "#f4f4f5",
        "#e4e4e7",
        "#d4d4d8",
        "#a1a1aa",
        "#71717a",
        "#52525b",
        "#3f3f46",
        "#27272a",
        "#18181b",
        "#09090b"
      ]
    },
    {
      "name": "Neutral",
      "colors": [
        "#fafafa",
        "#f5f5f5",
        "#e5e5e5",
        "#d4d4d4",
        "#a3a3a3",
        "#737373",
        "#525252",
        "#404040",
        "#262626",
        "#171717",
        "#0a0a0a"
      ]
    },
    {
      "name": "Stone",
      "colors": [
        "#fafaf9",
        "#f5f5f4",
        "#e7e5e4",
        "#d6d3d1",
        "#a8a29e",
        "#78716c",
        "#57534e",
        "#44403c",
        "#292524",
        "#1c1917",
        "#0c0a09"
      ]
    },
    {
      "name": "Red",
      "colors": [
        "#fef2f2",
        "#fee2e2",
        "#fecaca",
        "#fca5a5",
        "#f87171",
        "#ef4444",
        "#dc2626",
        "#b91c1c",
        "#991b1b",
        "#7f1d1d",
        "#450a0a"
      ]
    },
    {
      "name": "Orange",
      "colors": [
        "#fff7ed",
        "#ffedd5",
        "#fed7aa",
        "#fdba74",
        "#fb923c",
        "#f97316",
        "#ea580c",
        "#c2410c",
        "#9a3412",
        "#7c2d12",
        "#431407"
      ]
    },
    {
      "name": "Amber",
      "colors": [
        "#fffbeb",
        "#fef3c7",
        "#fde68a",
        "#fcd34d",
        "#fbbf24",
        "#f59e0b",
        "#d97706",
        "#b45309",
        "#92400e",
        "#78350f",
        "#451a03"
      ]
    },
    {
      "name": "Yellow",
      "colors": [
        "#fefce8",
        "#fef9c3",
        "#fef08a",
        "#fde047",
        "#facc15",
        "#eab308",
        "#ca8a04",
        "#a16207",
        "#854d0e",
        "#713f12",
        "#422006"
      ]
    },
    {
      "name": "Lime",
      "colors": [
        "#f7fee7",
        "#ecfccb",
        "#d9f99d",
        "#bef264",
        "#a3e635",
        "#84cc16",
        "#65a30d",
        "#4d7c0f",
        "#3f6212",
        "#365314",
        "#1a2e05"
      ]
    },
    {
      "name": "Green",
      "colors": [
        "#f0fdf4",
        "#dcfce7",
        "#bbf7d0",
        "#86efac",
        "#4ade80",
        "#22c55e",
        "#16a34a",
        "#15803d",
        "#166534",
        "#14532d",
        "#052e16"
      ]
    },
    {
      "name": "Emerald",
      "colors": [
        "#ecfdf5",
        "#d1fae5",
        "#a7f3d0",
        "#6ee7b7",
        "#34d399",
        "#10b981",
        "#059669",
        "#047857",
        "#065f46",
        "#064e3b",
        "#022c22"
      ]
    },
    {
      "name": "Teal",
      "colors": [
        "#f0fdfa",
        "#ccfbf1",
        "#99f6e4",
        "#5eead4",
        "#2dd4bf",
        "#14b8a6",
        "#0d9488",
        "#0f766e",
        "#115e59",
        "#134e4a",
        "#042f2e"
      ]
    },
    {
      "name": "Cyan",
      "colors": [
        "#ecfeff",
        "#cffafe",
        "#a5f3fc",
        "#67e8f9",
        "#22d3ee",
        "#06b6d4",
        "#0891b2",
        "#0e7490",
        "#155e75",
        "#164e63",
        "#083344"
      ]
    },
    {
      "name": "Sky",
      "colors": [
        "#f0f9ff",
        "#e0f2fe",
        "#bae6fd",
        "#7dd3fc",
        "#38bdf8",
        "#0ea5e9",
        "#0284c7",
        "#0369a1",
        "#075985",
        "#0c4a6e",
        "#082f49"
      ]
    },
    {
      "name": "Blue",
      "colors": [
        "#eff6ff",
        "#dbeafe",
        "#bfdbfe",
        "#93c5fd",
        "#60a5fa",
        "#3b82f6",
        "#2563eb",
        "#1d4ed8",
        "#1e40af",
        "#1e3a8a",
        "#172554"
      ]
    },
    {
      "name": "Indigo",
      "colors": [
        "#eef2ff",
        "#e0e7ff",
        "#c7d2fe",
        "#a5b4fc",
        "#818cf8",
        "#6366f1",
        "#4f46e5",
        "#4338ca",
        "#3730a3",
        "#312e81",
        "#1e1b4b"
      ]
    },
    {
      "name": "Violet",
      "colors": [
        "#f5f3ff",
        "#ede9fe",
        "#ddd6fe",
        "#c4b5fd",
        "#a78bfa",
        "#8b5cf6",
        "#7c3aed",
        "#6d28d9",
        "#5b21b6",
        "#4c1d95",
        "#2e1065"
      ]
    },
    {
      "name": "Purple",
      "colors": [
        "#faf5ff",
        "#f3e8ff",
        "#e9d5ff",
        "#d8b4fe",
        "#c084fc",
        "#a855f7",
        "#9333ea",
        "#7e22ce",
        "#6b21a8",
        "#581c87",
        "#3b0764"
      ]
    },
    {
      "name": "Fuchsia",
      "colors": [
        "#fdf4ff",
        "#fae8ff",
        "#f5d0fe",
        "#f0abfc",
        "#e879f9",
        "#d946ef",
        "#c026d3",
        "#a21caf",
        "#86198f",
        "#701a75",
        "#4a044e"
      ]
    },
    {
      "name": "Pink",
      "colors": [
        "#fdf2f8",
        "#fce7f3",
        "#fbcfe8",
        "#f9a8d4",
        "#f472b6",
        "#ec4899",
        "#db2777",
        "#be185d",
        "#9d174d",
        "#831843",
        "#500724"
      ]
    },
    {
      "name": "Rose",
      "colors": [
        "#fff1f2",
        "#ffe4e6",
        "#fecdd3",
        "#fda4af",
        "#fb7185",
        "#f43f5e",
        "#e11d48",
        "#be123c",
        "#9f1239",
        "#881337",
        "#4c0519"
      ]
    }

]
}

[Govind Vyas]

Impressive 😍
If you don't mind, what is the tech stack?

[Michael Andreuzza]

It's built on Astro, Tailwind CSS and React for this tools or something like that. @gabrielperales has taken care of that part, I built the design part. 🙂

[gleamso]

Nice. I'm looking for beautiful gradient for my tiny saas gleam.so