The box-shadow property in CSS is for putting shadows on elements (sometimes referred to as “drop shadows”, ala Photoshop/Figma).

.card {
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);

That syntax is:

box-shadow: [horizontal offset] [vertical offset] [blur 
Avatar of Sara Cope
Sara Cope on (Updated on )

Top Shadow

Shadow along the top edge of the website, like this:

body::before {
  content: "";
  position: fixed;
  top: -10px;
  left: 0;
  width: 100%;
  height: 10px;
  box-shadow: 0px 0 10px rgba(0, 0, 0, 0.8);
  z-index: 100;
Avatar of Chris Coyier
Chris Coyier on (Updated on )