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
Stop positionsSet precise stop locations with from-<percentage>, via-<percentage>, and to-<percentage> utilities.
Off
Live preview
Linear gradient | To Right | shade 400
Gradient typeSwitch between linear, radial, conic, repeating radial, and repeating conic gradient variants inspired by Tailwind's bg-linear, bg-radial, and bg-conic utilities.Tailwind background-image variants
Directional blends using Tailwind's bg-linear-to-* and bg-linear-<angle> utilities.
Interpolation modeChange color interpolation with suffixes like /srgb, /oklch, /longer, or /decreasing.Optional
Direction
Tailwind classes
Tailwind
bg-linear-to-r from-blue-500 via-purple-500 to-pink-500
background-image: linear-gradient(to right, rgba(43, 127, 255, 1), rgba(173, 70, 255, 1), rgba(246, 51, 154, 1));
HEX
from: #2B7FFF via: #AD46FF to: #F6339A
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.