Create a “inset” effect using CSS in websites

Question

I am very much impressed by the \"inset\" like effect in many latest websites. Some examples are

and

The line in the center. Nowadays, many webs

Answer 1

Simply do the following:

.hr {
  opacity: 0.2;
  border-top: 1px solid #000;
  border-bottom: 1px solid #fff;
}

Play with opacity and colors to suit your design, It works on all backgrounds I think ;)