Pattern Backgrounds are live
Tailwind Gradient Background
Design vivid background gradients in seconds. Pick a direction, shuffle curated color combos, and paste ready-to-use Tailwind classes directly into your project.
Via
Live previewLinear gradient · To Right· shade 400
Gradient typeTailwind background-image variants
Directional blends using Tailwind's bg-gradient-to utilities.
Direction
Tailwind classes
Tailwind
bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500
background-image: linear-gradient(to right, rgba(59, 130, 246, 1), rgba(168, 85, 247, 1), rgba(236, 72, 153, 1));
HEX
from: #3b82f6 via: #a855f7 to: #ec4899
Curated Gradients
Browse a collection of hand-picked background gradients, fine-tuned to look great in dashboards, hero sections, and call-to-action blocks.
Filter by color12 matches
Layout
How to use
- Pick a gradient, gradient type, and your preferred color stops.
- Adjust direction or custom angles when using linear or conic gradients.
- Tap Copy to grab the Tailwind/CSS output.
- Paste into your element: e.g. a card, section, or page.
Gradient library
Click a card to preview. Copy from the panel above when you're happy with the result.