Shadow outside the div

Asked

Viewed 158 times

-1

I always wore shade on the sides of the div. But it is possible to use the shadow from outside (or above) of the div?

As in this example?

inserir a descrição da imagem aqui

css
  • 1

    This example is not very clear. You want the shadow to be inside the div, from top to bottom?

  • "above" or "above" the DIV?

2 answers

2


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

Behold:

.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>

Usually, the box-shadow positions the shadow outside the element, but with the option inset the shadow becomes internal.

1

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

See this example and look how was built the 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>

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.