Shadow outside the div

Navigation
-1

I've always used shadow on the sides of the div. But is it possible to use the shadow on the outside (or top) of the div?

As in this example?

    
asked by anonymous 04.09.2018 / 17:56

2 answers

2

Maybe what you're looking for is box-shadow with the inset option.

See: 

.caixa{
    height: 150px;
    background-color: orange;
    margin: 10px 0;
}

.sombra{
  box-shadow: 0 -45px 45px  red inset;
}
<div class="caixa"></div>
<div class="caixa sombra"></div>

Normally, box-shadow places the shadow on the outside of the element, but with the inset option the shadow becomes internal.

    
04.09.2018 / 18:20
1

Most likely this is an element with two backgrounds , one bg with the image and another bg with linear-gradiente .

Look at this example and look at how it was built background of div 

body {
  margin: 0;
}
.mapa {
  width: 100%;
  height: 100px;
  background-image: linear-gradient(to bottom, rgba(0,0,0,0.75), transparent), url(https://snazzy-maps-cdn.azureedge.net/assets/1243-xxxxxxxxxxx.png?v=20170626083204);
  background-size: cover;
  background-repeat: no-repeat;
}
<div class="mapa"></div>
    
04.09.2018 / 19:42
How to use the parameters in the command line [duplicate] Login and create invoice