im trying to inherit gradient background color grom grandparent to child.

The result im trying to achieve is:

  {/* Gradient **GRANDFATHER***/}
<div
    className={'flex-1 flex flex-col-reverse relative'}
    style={{background:'linear-gradient(to bottom, #550029, #aa3232, #e3b100)'}}
>
   {/* Needed parents to style placing */}
    <div className='flex-1'>
         <div className={'flex flex-col'}>

             {/* Dark grey **PARENT ***/}

              <div className={'flex bg-darkGrey overflow-hidden'}>

                  {/* Gradient shaped **CHILD***/}

                  <div
                      className={'rounded-3xl shadow-[-3px_0_0_19px_#121212] flex items-center'}
                   >
                      Content inside gradient child
                   </div>
              </div>
         </div>
    </div>
</div>

What do i need if for?

I’m trying to recreate messenger long press blurred background

When i dont specify on parent bg-darkGrey im getting weird shaped blurred result:

Unexpected result:

When i add bg-darkGrey to parent and hard code child to be bg-purple im getting:

Expected result:

All i need now its just to change child background to inherit grandparent gradient color. Messages of course could by at any place so i need to inherit this gradient

If you are not familiar with this feature, know my shadow-[-3px_0_0_19px_#121212] or outline shape my gradient to get rounded-3xl shape

I was trying to use clip path or mask but im not familiar with these so i didnt get expected result. I tried to use pseudoelement on parent, just to not inherit this bg-darkGrey or pseudoelement on child to set new gradient and inherit it.