Type

Linear

Radial

Conic

Direction

Tailwind class: bg-gradient-to-b

Note

Tailwind v3 doesn't include built-in radial/conic gradient classes. This outputs an arbitrary value using Tailwind's [...] syntax — compatible with Tailwind v3.x+.

Color Stops

For Tailwind output, first stop = from-, middle = via-, last = to-

Output Format

Class String

Config / CSS

Class string — paste directly into your HTML class="" attribute.

Presets

Actions

Tailwind Output

Tailwind CSS Gradient Generator — Utility Classes Instantly

Generate Tailwind CSS gradient utility classes for linear, radial, and conic gradients with live preview. Outputs ready-to-use class strings using Tailwind's bg-gradient-to-*, from-[color], via-[color], and to-[color] utilities. Works with Tailwind v3+. Also available as Raw CSS and Bootstrap.