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

Here is a more current and flexible solution that can be used.

JSFIDDLE

.hr {
  background: rgba(0, 0, 0, 0.6);
  height: 1px;
  width: 100%;
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

By using RGBA(Red, Green, Blue, Alpha) you can use white/black with an alpha(opacity) to make the illusion of an inset effect.