Gradient Converter

Convert CSS gradients into Tailwind arbitrary values or switch between linear, radial, and conic syntax.

Gradient Converter

Paste any CSS, Tailwind, or Bootstrap gradient — outputs are generated automatically.

Detected: CSS

Live Preview

linear-gradient · 3 stops

Tailwind CSS

Utility classes or arbitrary value syntax.

bg-gradient-to-br from-[#2563EB] via-[#7C3AED] to-[#EC4899]

Bootstrap 5

Custom utility using Bootstrap 5 background properties.

.custom-gradient {
  background-color: #2563EB;
  background-image: linear-gradient(135deg, #2563EB 0%, #7C3AED 50%, #EC4899 100%);
}