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, #000000 0deg 148deg, #0f172a 148deg 263deg, #2563eb 263deg 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,_#000000_0deg_148deg,_#0f172a_148deg_263deg,_#2563eb_263deg_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>