Kevin Powell - Community•14mo ago

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•14mo ago

Kevin Powell•14mo 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•14mo ago

Is there a way to get that square shape?

glutonium•14mo ago

the one inside?? like tilted and can barely be seen??

Chris Bolson•14mo 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•14mo ago

I didn't realize you can see that square... that feels like a mistake on the designers part tbh 😅

kashyap_rajan•14mo ago

😅 . I spent so much time looking into that. 😂 . I'll have a chat with him. Yupp

Unknown User•14mo ago

Message Not Public

kashyap_rajan•14mo 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

Gaming

Programming

How to create a gradient so that it is beneath the text but above the main background of container