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.