draw a line and putting shadow on its bottom using css-CodePudding

how can I draw this line all the way from right to left and I want to put some shadow beneath it as shown in the image above? I've seen this kind of design generally for separating the navigation bar and body of websites.

section {
  background-color: grey;
}

<section>Hello world</section>

CodePudding user response：

Looks to me like a bottom box-shadow at the end of a section. This would be an outset box-shadow with a 10px y-offset and about 12px of a blur. The nice thing about the dev tools is you can play around with the offsets, blur, and spread of the box-shadow to get your desired result.

View the snippet and scroll to the bottom.

section {
  height: 900px;
  width: 100vw;
  margin-bottom: 5rem;
  background-color: #FAF9F6;
  box-shadow: 0 10px 12px 0px #e1e1e1;
}

body {
  margin: 0;
}

<section>Scroll to bottom
</section>

CodePudding user response：

For bottom shadow you can change the radius/offset values of box-shadow to make sure it only appears at the bottom:

.one-edge-shadow {
    -webkit-box-shadow: 0 8px 6px -6px black;
       -moz-box-shadow: 0 8px 6px -6px black;
            box-shadow: 0 8px 6px -6px black;
}

Find more information here: https://css-tricks.com/snippets/css/css-box-shadow/

CodePudding user response：

hr {
border: 0;
    border-top: 5px solid #5f5f5f;
    box-shadow: 2px 4px 8px 2px #333;
}

<hr/>