CSS background not displaying over ::before and ::after despite higher z-index

Question

I'm trying to recreate a linear gradient border which has a shadow of its colours, similar to this example. I've got this CSS code:

.container {
  background: $jet;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-family: "Inconsolata", monospace;
}

.rightSide {
  color: white;
  font-size: 1.25em;
  font-family: "Inconsolata", monospace;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 2 1;
}

.projects {
color: white;
font-size: 1.25em;
font-family: "Inconsolata", monospace;
box-sizing: border-box;
width: 18rem;
position: relative;
padding: 1rem 2rem;
margin: auto;
background: linear-gradient(0deg, #000, #262626);
}

.projects h2 {
  font-size: 1.5em;
    text-align: center;
    margin-bottom: 0.75em;
    padding-bottom: 0.25em;
    border-bottom: 1px solid white;
}

.projects ul {
  padding-inline: 0;
  margin-block: 0;
 
}

.projects ul li {
  list-style: "▶" outside none;
  padding-left: 0.5em;
}

.projects ul li > a {
  color: $blue;
  text-decoration: none;
}

.projects ul li > a:hover {
  text-decoration: underline;
}

.projects ul li:nth-of-type(n+11) {
  display: none;
}

.projects ul li:not(:last-child) {
  margin-bottom: 0.75em;
}

.projects::before,
.projects:after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  background: linear-gradient(
    45deg,
    #fb0094,
    #0000ff,
    #ff0000,
    #fb0094,
    #0000ff,
    #ff0000
  );
  background-size: 400%;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  z-index: -1;
  animation: animate 60s linear infinite;
}

.projects:after {
  filter: blur(20px);
}

@keyframes animate {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 300% 0;
  }
  100% {
    background-position: 0 0;
  }
}

<div class="container">
  <h1 class="name">Temp</h1>
  <div class="rightSide">
    <div class="projects">
      <h2>Projects</h2>
      <ul>
        <li><a aria-current="page" class="" href="/">Project 1</a></li>
        <li><a aria-current="page" class="" href="/">Project 2</a></li>
        <li><a aria-current="page" class="" href="/">Project 3</a></li>
      </ul>
    </div>
  </div>
</div>

https://jsfiddle.net/u2xvekdb/

However this only displays the background of the projects div and not the animated shadow and border. If I add z-index: 0; to the div, it does display the shadow however the entire background for the pseudoelements are displaying and the main background is missing.

Expected:

Without z-index: 0

With z-index: 0

How do I change it to get the expected result?

That's not actually a [mre], as we have to guess what `styles.name` (and others) actually are. Could you provide the actual rendered HTML, not the JSX? — Unmitigated, Jun 04 '23 at 15:50
I've converted your not-HTML and CSS into a running snippet, could you edit that to replace - as Unmitigated asked - the JSX with HTML? — David Thomas, Jun 04 '23 at 15:53
And, with some guessing, it seems to work fine: https://jsfiddle.net/1yhgvL7b/ — Unmitigated, Jun 04 '23 at 15:54
I've converted it over to plain html and CSS and in doing so found the issue to do with the container style overriding the backgrounds defined, strange that it was doing so even though dev tools was reporting that it was being overridden so had no effect. thanks — actuallyatiger, Jun 04 '23 at 16:15

score 0 · Answer 1 · answered Jun 04 '23 at 18:10

It's working now have a look background also appeared along with animations.

.container {
  background: $jet;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-family: "Inconsolata", monospace;
}

.rightSide {
  color: white;
  font-size: 1.25em;
  font-family: "Inconsolata", monospace;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 2 1;
}

.projects {
color: white;
font-size: 1.25em;
font-family: "Inconsolata", monospace;
box-sizing: border-box;
width: 18rem;
position: relative;
padding: 1rem 2rem;
margin: auto;
background: linear-gradient(0deg, #000, #262626);
}

.projects h2 {
  font-size: 1.5em;
    text-align: center;
    margin-bottom: 0.75em;
    padding-bottom: 0.25em;
    border-bottom: 1px solid white;
}

.projects ul {
  padding-inline: 0;
  margin-block: 0;
 
}

.projects ul li {
  list-style: "▶" outside none;
  padding-left: 0.5em;
}

.projects ul li > a {
  color: $blue;
  text-decoration: none;
}

.projects ul li > a:hover {
  text-decoration: underline;
}

.projects ul li:nth-of-type(n+11) {
  display: none;
}

.projects ul li:not(:last-child) {
  margin-bottom: 0.75em;
}

.projects::before,
.projects:after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  background: linear-gradient(
    45deg,
    #fb0094,
    #0000ff,
    #ff0000,
    #fb0094,
    #0000ff,
    #ff0000
  );
  background-size: 400%;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  z-index: -1;
  animation: animate 60s linear infinite;
}

.projects:after {
  filter: blur(20px);
}

@keyframes animate {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 300% 0;
  }
  100% {
    background-position: 0 0;
  }
}

<div class="container">
  <h1 class="name">Temp</h1>
  <div class="rightSide">
    <div class="projects">
      <h2>Projects</h2>
      <ul>
        <li><a aria-current="page" class="" href="/">Project 1</a></li>
        <li><a aria-current="page" class="" href="/">Project 2</a></li>
        <li><a aria-current="page" class="" href="/">Project 3</a></li>
      </ul>
    </div>
  </div>
</div>

.container {
  background: $jet;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-family: "Inconsolata", monospace;
}

.rightSide {
  color: white;
  font-size: 1.25em;
  font-family: "Inconsolata", monospace;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 2 1;
}

.projects {
color: white;
font-size: 1.25em;
font-family: "Inconsolata", monospace;
box-sizing: border-box;
width: 18rem;
position: relative;
padding: 1rem 2rem;
margin: auto;
background: linear-gradient(0deg, #000, #262626);
}

.projects h2 {
  font-size: 1.5em;
    text-align: center;
    margin-bottom: 0.75em;
    padding-bottom: 0.25em;
    border-bottom: 1px solid white;
}

.projects ul {
  padding-inline: 0;
  margin-block: 0;
 
}

.projects ul li {
  list-style: "▶" outside none;
  padding-left: 0.5em;
}

.projects ul li > a {
  color: $blue;
  text-decoration: none;
}

.projects ul li > a:hover {
  text-decoration: underline;
}

.projects ul li:nth-of-type(n+11) {
  display: none;
}

.projects ul li:not(:last-child) {
  margin-bottom: 0.75em;
}

.projects::before,
.projects:after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  background: linear-gradient(
    45deg,
    #fb0094,
    #0000ff,
    #ff0000,
    #fb0094,
    #0000ff,
    #ff0000
  );
  background-size: 400%;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  z-index: -1;
  animation: animate 40s linear infinite;
}

.projects:after {
  filter: blur(20px);
}

@keyframes animate {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 800% 0;
  }
  100% {
    background-position: 0 0;
  }
}

<div class="container">
  <h1 class="name">Temp</h1>
  <div class="rightSide">
    <div class="projects">
      <h2>Projects</h2>
      <ul>
        <li><a aria-current="page" class="" href="/">Project 1</a></li>
        <li><a aria-current="page" class="" href="/">Project 2</a></li>
        <li><a aria-current="page" class="" href="/">Project 3</a></li>
      </ul>
    </div>
  </div>
</div>

CSS background not displaying over ::before and ::after despite higher z-index

1 Answers1