DEV Community

Cover image for We have built a new tool to create background and text gradients with Tailwind CSS
Michael Andreuzza
Michael Andreuzza

Posted on

11 2 2 2 3

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.

Billboard image

Monitor more than uptime.

With Checkly, you can use Playwright tests and Javascript to monitor end-to-end scenarios in your NextJS, Astro, Remix, or other application.

Get started now!

Top comments (5)

Collapse
 
nabaraj profile image
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?

Collapse
 
mike_andreuzza profile image
Michael Andreuzza • Edited

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"
      ]
    }

]
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
govindvyas profile image
Govind Vyas

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

Collapse
 
mike_andreuzza profile image
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. 🙂

Collapse
 
gleamso profile image
gleamso
Comment hidden by post author

Some comments have been hidden by the post's author - find out more

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay