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, #451a03 0deg 171deg, #0a0a0a 171deg 260deg, #000000 260deg 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,_#451a03_0deg_171deg,_#0a0a0a_171deg_260deg,_#000000_260deg_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>