Tailwind Conic Gradient Generator

This tool allows you to generate a conic gradient for your Tailwind CSS. You can customize the colors, opacity, and blur amount to create a unique gradient for your design.

Generated Gradient Code:

CSS:

/* Parent container */
.gradient-container {
  background: conic-gradient(from 0deg, #d97706 0deg 163deg, #059669 163deg 265deg, #0a0a0a 265deg 360deg);
}

/* Blur overlay */
.blur-overlay {
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  background-color: rgba(0, 0, 0, 0.1);
}

Tailwind:

<!-- Parent container -->
<div class="bg-[conic-gradient(from_0deg,_#d97706_0deg_163deg,_#059669_163deg_265deg,_#0a0a0a_265deg_360deg)]">
  <!-- Blur overlay -->
  <div class="backdrop-blur-[40px] bg-black/10">
    <!-- Your content here -->
  </div>
</div>

HTML Structure:

<!-- Parent container -->
<div class="gradient-container">
  <!-- Blur overlay -->
  <div class="blur-overlay">
    <!-- Your content here -->
  </div>
</div>