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, #0f172a 0deg 28deg, #1e3a8a 28deg 357deg, #854d0e 357deg 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,_#0f172a_0deg_28deg,_#1e3a8a_28deg_357deg,_#854d0e_357deg_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>