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-[#4a7d4a] 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-[#4a7d4a] after:content-['']"></button>

Tailwind CSS gradient background

Tailwind CSS Gradient background

Tailwind CSS Code Snippet

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

Not quite the right gradient? Discover more

Spring Bright Green

Color codes used in spring bright green gradient: #a7e061, #68bb6c, #338a3f

Summer Breeze

Color codes used in summer breeze gradient: #ff9c8f, #ffcf70, #ffe66b

Sunny Summer Glow

Color codes used in sunny summer glow gradient: #ffffff, #ffe066, #ffd900

Autumn Ember

Color codes used in autumn ember gradient: #ffa600, #ff8c00, #ff4400

Autumn Ember

Color codes used in autumn ember gradient: #ffc105, #ff6e42, #e53734

Autumn Fires

Color codes used in autumn fires gradient: #ffc105, #ff6e00, #d33131

Autumn Glow

Color codes used in autumn glow gradient: #ffc105, #ff9100, #ff6e00

Summer Breeze

Color codes used in summer breeze gradient: #ffe066, #66ccff, #3399cc
Explore more gradients