logo

Developer

Tailwind Gradient Helper

Paste a CSS linear-gradient, tweak stops, and copy ready-to-use Tailwind utilities. For advanced gradients (angles, radial, conic, or multiple stops), get a one-line arbitrary value fallback.

Tailwind Gradient Helper
Client-side onlyFast & private

Input

linear • 2 stops

Use to … (e.g., to-r maps to to right) or angles like 45deg. Angles will use an arbitrary fallback.

Stop 1

Tailwind native mapping supports unpositioned stops only.

Stop 2

Tailwind native mapping supports unpositioned stops only.

Notes
  • Tailwind maps linear gradients with direction keywords (to right, to top-right, …) and up to 3 stops (from/via/to).
  • Angles, positioned stops, 4+ stops, radial and conic gradients use a safe bg-[...] arbitrary fallback.

Output

Live preview
Tailwind output
bg-[conic-gradient(to right, #22d3ee, #6366f1)]

Note: Radial/Conic not natively mapped. — using bg-[...] arbitrary fallback.

CSS background-image
/* Example */
.card {
  background-image: linear-gradient(to right, #22d3ee, #6366f1);
}

How to use the Tailwind Gradient Helper

  1. Paste a CSS gradient into the box or use the builder controls (type, direction, color stops).
  2. If it’s a standard linear gradient with 2–3 unpositioned stops and a keyword direction (to right, to-tr, etc.), you’ll get native Tailwind classes: bg-gradient-to-*, from-*, via-*, to-*.
  3. For angles, positioned stops, 4+ stops, or radial/conic gradients, use the safe fallback class shown: bg-[linear-gradient(...)], bg-[radial-gradient(...)], or bg-[conic-gradient(...)].
  4. Click Copy Tailwind or Copy CSS and paste into your project.

Tip: You can use arbitrary colors in Tailwind via brackets, e.g. from-[#22d3ee] or via-[oklch(70%_0.2_250)].