tailwind-cssradius

How to apply radial-gradiant property in Tailwind css

How will I incorporate a radial gradient in my website by using Tailwind CSS? And how will I get curvature border i.e. a wave like border.

I tried it by writing bg-radial-gradient but there in no such class. To give curvature I used border-b 2 rounded-[300px] but it is not working properly.

enter image description here

Solution

  • For a radial gradient, you could consider using an arbitrary value class like:

    <script src="https://cdn.tailwindcss.com/3.4.1"></script>

<div class="h-screen bg-[radial-gradient(circle_at_50%_75%,red,blue)]"></div>

    You could also consider adding a radial gradient as a value in your theme like:

    tailwind.config = {
  theme: {
    backgroundImage: {
      'radial-gradient': 'radial-gradient(circle at 50% 75%, red, blue)',
    },
  },
};
    <script src="https://cdn.tailwindcss.com/3.4.1"></script>

<div class="w-screen h-screen bg-radial-gradient"></div>

    If you want to combine either method with the existing gradient classes, you could look at including the var(--tw-gradient-stops) value:

    tailwind.config = {
  theme: {
    backgroundImage: {
      'radial-gradient': 'radial-gradient(circle, var(--tw-gradient-stops))',
    },
  },
};
    <script src="https://cdn.tailwindcss.com/3.4.1"></script>

<div class="h-[50vh] bg-[radial-gradient(circle_at_0%_50%,var(--tw-gradient-stops))] from-purple-200 from-10% via-green-200 via-30% to-blue-800 to-50%"></div>
<div class="h-[50vh] bg-radial-gradient from-purple-200 from-10% via-green-200 via-30% to-blue-800 to-50%"></div>

    With regards to your other question about how to get curvature border i.e. a wave like border, consider posting a separate question – posts on Stack Overflow should be kept to one question.