'draw a line and putting shadow on its bottom using css

enter image description here

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


Solution 1:[1]

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>

Solution 2:[2]

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/

Solution 3:[3]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 crevulus
Solution 3 Mofarjul Molla

Related Questions