Search code examples
tailwind-cssgradientflowbite

Flowbite Tailwind | Purple gradient background of navbar


I'm a complete newbie to Flowbite Tailwind, so please don't assume any previous knowledge :)

I'd like a navbar with a purple gradient background.

There is no gradient background navbar example in the Components documentation. But there is a Solid background example. And, there is a gradient example of a Button. So I have attempted to combine the two, and it works for the example Button colours, as follows:

<nav class="p-3 border-gray-200 rounded text-white bg-gradient-to-br from-purple-600 to-blue-500">

But when I try to change those colours a little, for example to:

<nav class="p-3 border-gray-200 rounded text-white bg-gradient-to-br from-purple-900 to-purple-400"> the background/gradient completely disappears, leaving just white (transparency??).

What am I doing wrong please??

Thanks!

I've tried various different colours, and some work as expected (gradient from colours 1 to colour 2).

But it seems if the strength number is over 600 you get nothing. And, if the colours are the same with different strengths one of them just doesn't appear.


Solution

  • It is working just fine

    enter image description here

    Try this tailwind-play