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.
9 Replies
kashyap_rajan
kashyap_rajan•2y ago
Kevin Powell
Kevin Powell•2y ago
I think I'd just put a radial gradient over on the side of the box?
.box {
background-color: hsl(231, 65%, 58%);
background-image: radial-gradient(circle at 0% 50%, hsl(232, 69%, 63%, 100%), hsl(232, 69%, 63%, 0%);
}
.box {
background-color: hsl(231, 65%, 58%);
background-image: radial-gradient(circle at 0% 50%, hsl(232, 69%, 63%, 100%), hsl(232, 69%, 63%, 0%);
}
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.
kashyap_rajan
kashyap_rajan•2y ago
Is there a way to get that square shape?
glutonium
glutonium•2y ago
the one inside?? like tilted and can barely be seen??
Chris Bolson
Chris Bolson•2y ago
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
Kevin Powell
Kevin Powell•2y ago
I didn't realize you can see that square... that feels like a mistake on the designers part tbh 😅
kashyap_rajan
kashyap_rajan•2y ago
😅 . I spent so much time looking into that. 😂 . I'll have a chat with him. Yupp
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
kashyap_rajan
kashyap_rajan•2y ago
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
Want results from more Discord servers?
Add your server