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

Tailwind CSS gradient background

Tailwind CSS Gradient background

Tailwind CSS Code Snippet

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

Not quite the right gradient? Discover more

Spring Meadow

Color codes used in spring meadow gradient: #a44ca4, #ff6bb5, #7dfa00, #ffffff

Spring Blossom

Color codes used in spring blossom gradient: #a76eb9, #e8a1c0, #7ec99c

Supernova Spark

Color codes used in supernova spark gradient: #ff6e61, #ffd900, #690dab

Amber Glow

Color codes used in amber glow gradient: #ffc105, #ffb300, #ffa200

Navision Sunrise

Color codes used in navision sunrise gradient: #ff8161, #feb47c, #ffd900

Hot Melon

Color codes used in hot melon gradient: #ff6e61, #ffb347, #ffd900

Sunset Sky

Color codes used in sunset sky gradient: #3c83f6, #ef4343, #f59f0a

Spring Bright Green

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