ADVERT

🌀 CSS gradient → Tailwind

Convert CSS gradients into Tailwind utility classes. Supports linear, radial, and conic gradients with smart mapping to Tailwind syntax.

CSS Gradient → Tailwind Converter

Paste a linear-gradient(...), radial-gradient(...) or conic-gradient(...) and get Tailwind classes. Non-linear angles and radial/conic gradients return Tailwind arbitrary values.

CSS Gradient

Tailwind Output

bg-gradient-to-tr from-[#ff6b6b] to-[#4ea7ff]

Why use this converter

Turn designer-provided CSS into Tailwind classes instantly.
Experiment with gradient directions and see Tailwind equivalents.
Keep arbitrary values tidy without hand-formatting.

Tips

Tailwind linear gradients support `from`, `via`, and `to`—add more stops for complex blends.
Radial and conic gradients become arbitrary utilities; keep them in your safelist if purging CSS.
Copy the output straight into `className` or Tailwind config files.

ADVERT

More like this

Format YAML, convert between YAML and JSON, and validate syntax instantly in your browser with offline support.

Decode JWT header and payload safely in your browser. Inspect claims and structure without sending tokens anywhere.

Create signed JSON Web Tokens with customizable headers and payloads. Choose HS256, HS384, or HS512 HMAC algorithms and copy the ready-to-use JWT.

Visually craft cron expressions with presets, interval selectors, and quick toggles. Copy the expression and preview the next scheduled runs instantly.

Parse cron expressions and preview next run times. Useful for devs managing scheduled tasks and crontab jobs.

Compute HMAC signatures with SHA-256, SHA-1, or MD5 using a secret key. Secure online hashing tool.

Test and debug JavaScript regular expressions. Highlight matches and quickly verify regex patterns.

Compose regular expressions with guided toggles for character sets, anchors, quantifiers, and flags. Test against sample input instantly.

ADVERT