Tailwind CSS Gradient Generator

Beautiful gradients instantly styled with Tailwind CSS. Pick your colors, preview in real UI components, and copy the code — all in one place.

Gradient Settings

Gradient colors

Linear gradient direction

Tailwind CSS UI Elements

Tailwind CSS Gradient Text

Tailwind CSS Code Snippet

<h1 class="bg-gradient-to-r from-[#f8dd7c] bg-clip-text text-transparent"></h1>
Like the button style? Press to see Tailwind CSS styling

No Animation Buttons

Background Filled Buttons

Animated Slide Buttons

Tailwind CSS Code Snippet

<button class="relative cursor-pointer rounded border-2 border-transparent bg-white bg-clip-padding px-5 py-2 text-sm font-semibold after:absolute after:-inset-0.5 after:-z-10 after:rounded after:bg-gradient-to-r after:from-[#f8dd7c] after:content-['']"></button>

Tailwind CSS gradient background

Tailwind CSS Gradient background

Tailwind CSS Code Snippet

<div class="bg-gradient-to-r from-[#f8dd7c]"></div>

Not quite the right gradient? Discover more

Gothic Twilight

Color codes used in gothic twilight gradient: #4a0080, #80007f, #212121

Red Berry Delight

Color codes used in red berry delight gradient: #b42222, #8a0000, #ff4d6d

Sunlit Dawn

Color codes used in sunlit dawn gradient: #ffeba8, #ffd080, #ffb347

Jagger's Vibe

Color codes used in jagger's vibe gradient: #ff8052, #ffd900, #ff4400

Vampire Night

Color codes used in vampire night gradient: #2d0b51, #800f4d, #e6002e

Sea Breeze

Color codes used in sea breeze gradient: #00bdad, #009999, #007575

Tropical Breeze

Color codes used in tropical breeze gradient: #00ffbb, #33ccab, #009978

Dreamscape Glow

Color codes used in dreamscape glow gradient: #a8c1ff, #ffd6a3, #ff8a8a
Explore more gradients