Question 206784 in CSS Question posted in
Some basic documentation can be found here.

How to use radial gradient in Tailwindcss

I’m trying to apply radial gradient in Tailwind but facing some issues. This’s what I’ve tried tailwind.config

backgroundColor: {
  'radial-gradient': 'radial-gradient(169.40% 89.55% at 94.76% 6.29%, rgba(0, 0, 0, 0.40) 0%, rgba(255, 255, 255, 0.00) 100%)',
},

and use it like

className='bg-radial-gradient'

This doesn’t seem to work. How can I do this in Tailwind?

Tags:

2

Answers


  1. 0

    As per the MDN documentation on radial-gradient():

    The function’s result is an object of the <gradient> data type, which is a special kind of <image>.

    <image>s are used in the background-image property, so you’d add the value as a backgroundImage value in Tailwind:

    tailwind.config = {
  theme: {
    extend: {
      backgroundImage: {
        'radial-gradient': 'radial-gradient(169.40% 89.55% at 94.76% 6.29%, rgba(0, 0, 0, 0.40) 0%, rgba(255, 255, 255, 0.00) 100%)',
      },
    },
  },
};
    <script src="https://cdn.tailwindcss.com/3.3.2"></script>

<div class="bg-radial-gradient w-20 h-20"></div>
    Login or Signup to reply.
  2. 0

    you can apply radial gradient in Tailwind like the below examples.
    e.g:

    //e.g 1
 <button type="button" class="bg-gradient-to-r from-green-400 to-blue-500 hover:from-pink-500 hover:to-yellow-500 ...">
  Hover me
</button>
//e.g 2
<div class="bg-gradient-to-r from-blue-500 to-transparent">hello</div>

    notice

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search