I'm confused as to where I'm going wrong

I’m trying to bring the card forward a layer so that they aren’t affected by the rainbow gradient background of the “box” div. I’ve tried using z-index but I can’t seem to figure it out.
Here is the link to my Codepen

If you want to get something like this:

move the background: linear-gradient(to bottom, rgba(4, 8, 15 ,0), #192133); to the .card-container.

i did that but i want to keep the soft edges. I updated my Codepen.
If I add the “filter: blur(10px);” it makes everything blurry. I just want the background of the container to be blurry.

Please don’t make changes after posting a question, and to expect some help. As I can see, you make two changes since the firs post. It is hard to tell what can be done in such a case.

1 Like