How to create a gradient so that it is beneath the text but above the main background of container
I need to create a background as shown in screenshot. Now if I create a div with fixed height or width, or even I use pseudo like after and before how am I supposed to put the gradient thing behind the text but above the container main background? I've never done this kind of work before. z-index is putting the entire thing behind the container.
![](https://utfs.io/f/0a61bf70-5b29-4821-a5e1-c05887373fdd-5jtiv0.49.23_PM.png)
9 Replies
![](https://utfs.io/f/057fb27c-193f-4c8b-8902-70b129e1ff72-5jtiv0.50.34_PM.png)
I think I'd just put a radial gradient over on the side of the box?
go from the light purple and transition it to the same color, but with 0% alpha so it's transparent.
https://codepen.io/kevinpowell/pen/XWxVbYZ
Here's a live example. I just used white for the gradient, but with lower opacity, but you could do it with whatever colors (make the first one red at full opacity to see where it's positioned and move it around if you want to visualize it better).
I played with the position (the
circle at
part), and on the last color stop, I also put a 70% so it doesn't go so far.Is there a way to get that square shape?
![](https://utfs.io/f/f84f66c9-fe5b-40e3-8972-dde06cb67f8c-94krd2.12.08_AM.png)
the one inside??
like tilted
and can barely be seen??
Kevin posted a great tool for creating gradients in the resources channel. I'm sure you could use that to generate what you are after.
https://gradient.style/
In the HD examples the "mmm pie" one might be a good starting point for what you want
I didn't realize you can see that square... that feels like a mistake on the designers part tbh 😅
😅 . I spent so much time looking into that. 😂 . I'll have a chat with him.
Yupp
Unknown User•17mo ago
Message Not Public
Sign In & Join Server To View
I've made the same thing but I literally had no idea there is something called isolation. Seems like it is working fine. Thanks @3er0