Box shadow doesn't appear

Question

Box shadow doesn't appear

830 Views Asked by Jafle At 02 May 2020 at 15:55

I've been all over this site for some solutions to my issue but nothing has seemed to work. Referring to This JSFiddle I'm trying to get internal drop shadows surrounding the top and bottom of the dark grey div. I've tried changing from flex to relative positions, z-index, order, various overflow options and drop shadow filters.

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="Bespoke">
    </head>
    <body>


<div class="grid">

<!-------- Row 1 ---------->


          <header>
          </header>


<!-------- Row 2 ---------->


           <article>
           </article>


<!-------- Row 3 ---------->   

           <blank>
           </blank>

<!-------- Row 4 ----------> 

           <subtitle>
           </subtitle>

<!-------- Row 5 ---------->   

           <blank2 class>
           </blank2>


<!-------- Row 5 ---------->   

           <footer>
           </footer>



</div>
    </body>
</html>

.grid {
    display: grid;
    grid-template-columns:auto;
    grid-gap: 0em;
    width: 100vw;
    height: 10vw;
}


}

@media all and (max-width: 100vw) {
  aside,
  article {

  }
}


body {
    margin: 0 auto;
    max-width: 100vw;
    background-image: url("https://cff2.earth.com/uploads/2019/08/15135811/Microplastics-are-raining-down-on-the-Rocky-Mountains-730x410.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    color: white;

}


header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 15vh;
    text-align: center;
    background: rgba(175, 165, 255, 0);
}

article {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30vh;
    text-align: center;
    background: rgba(0, 0, 0, 0);

}

blank {
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 15vh;
    text-align: center;
    background: rgba(205, 225, 105, 0);
    box-shadow(10px 10px 30px #000000);    
    z-index: 10;
}

subtitle {
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20vh;
    text-align: center;
    background-color: #1e1e1e;
    font-size: max(7vw, 20px);
    box-shadow(-10px -10px 30px #000000);         
    z-index: 9;

}

blank2 {
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20vh;
    text-align: center;
    background-color: #fffff7;
    z-index: 8;

}



footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    align-items: center;
    justify-content: center;
    height: 7vh;
    text-align: center;
    background-color: #fffff7;


}

Original Q&A

There are 2 best solutions below

**Filonenko Andrii** · Answer 1 · 2020-05-02T16:03:15.537000

Filonenko Andrii On 02 May 2020 at 16:03

Change box-shadow(-10px -10px 30px #000000); -> box-shadow: -10px -10px 30px #000000;

**Zachary Haber** · Answer 2 · 2020-05-02T16:03:21.493000

Your issue is that you had the syntax of the box-shadow CSS wrong

You had it like: box-shadow(10px 10px 30px #000000);

Where it needs to be: box-shadow: 10px 10px 30px #000000;

If CSS runs into properties it doesn't understand, then it just silently ignores it and considers it an invalid property. It doesn't throw an error of any kind.

In Chrome's dev tools, this is what an invalid property looks like: There is a warning sign that indicates that it's an unknown property name.

The syntax highlighting on the jsfiddle also shows the issue as it isn't showing the correct colors

Box shadow doesn't appear

There are 2 best solutions below

Related Questions in CSS

Related Questions in BOX-SHADOW

Trending Questions

Popular # Hahtags

Popular Questions