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, #854d0e 0deg 213deg, #854d0e 213deg 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,_#854d0e_0deg_213deg,_#854d0e_213deg_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>