I want to have a div which have transparent back-ground color fade to have backdrop-blur-2xl with Tailwind,

I have tried:

<div class='fixed top-0 z-10 h-18 bg-transparent bg-gradient-to-t from-transparent to-backdrop-blur-2xl transition-all'> 
</div>

this div is a main part of my navbar, so i want the navbar start as transparent and finish with blur effect

and I can see the div has the classes but doesnt render the to and from class