clip-path is currently one of the most straightforward methods to create box-shadows on specific sides of elements, particularly when aiming for a precise and defined shadow effect at certain edges (which seems to be the original goal of the OP). Here's an example:

.shadow-element {
    border: 1px solid #333;
    width: 100px;
    height: 100px;
    box-shadow: 0 0 15px rgba(0,0,0,0.75);
    clip-path: inset(0px -15px 0px 0px);
}

<div class="shadow-element"></div>

...in contrast with a softer/less pronounced shadow like this:

.shadow-element {
    border: 1px solid #333;
    width: 100px;
    height: 100px;
    box-shadow: 15px 0px 15px -10px rgba(0,0,0,0.75);
}

<div class="shadow-element"></div>

To implement this in CSS, simply add the following styles to the element:

box-shadow: 0 0 Xpx [hex/rgba]; /* keep the offset values at 0 */
clip-path: inset(Tpx Rpx Bpx Lpx);

Where:

• Tpx indicates shadow visibility at the top edge
• Rpx right edge
• Bpx bottom edge
• Lpx left edge

Set a value of 0 for edges where the shadow should be hidden and a negative value (equivalent to the blur radius of the box-shadow - Xpx) for edges where the shadow should be displayed.

Here's a simple solution I came up with that is easy to customize:

HTML:

<div id="custom-shadow">
    <div id="shadow-container"></div>
</div>​

CSS:

#shadow-container{
    margin-right:20px; /* Adjust this value to change shadow position */
    margin-left:0px; 
    margin-top:0px; 
    margin-bottom:0px; 
    box-shadow: 0px 0px 20px black; 
    height:100px;
    width:100px;
    background: red;
}

#custom-shadow{
    margin:20px;
    display:table;
    overflow:hidden;
}​

Check out the demo here:
http://jsfiddle.net/jDyQt/103

If you want to achieve a clipped effect on up to two sides, consider using pseudo elements with background gradients.

header::before, main::before, footer::before, header::after, main::after, footer::after {
    display:    block;
    content:    '';
    position:   absolute;
    width:      8px;
    height:     100%;
    top:        0px;
}

header::before, main::before, footer::before {
    left:       -8px;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

header::after, main::after, footer::after {
    right:      -8px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

This technique will create a shadow-like effect on the left and right edges of the elements typically found within a document.

To create a shadow effect, you can utilize the ::after or ::before pseudo-element in CSS. Simply define the shadow size as 1px and position it on your desired side. Below is an example demonstrating how to achieve this effect at the top of an element:

footer {
   margin-top: 50px;
   color: #fff;
   background-color: #009eff;
   text-align: center;
   line-height: 90px;
   position: relative;
}

footer::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    top: 0;
    left: 0;
    z-index: -1;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.75);
}

<footer>top only box shadow</footer>

Below is an example I created:

.panel{
        
        width: 300px; 
        height: 50px; 
        background-color: #F2EDED; 
        text-align: center; 
        font: 16px normal Verdana, Geneva, sans-serif; 
        color: #333; 
        padding: 10px;
        -webkit-box-shadow: 0 4px 5px -3px gray;
           -moz-box-shadow: 0 4px 5px -3px gray;
                box-shadow: 0 4px 5px -3px gray;
    }

<div class="panel">
</div>

Check out this codepen link for a visual demonstration on each side:

.boxes {
  display: flex;
  flex-wrap: wrap;
}

.box {
  margin: 20px;
  border: 1px solid #ccc;
  font-family: Helvetica Neue, Arial, sans-serif;
  font-weight: 100;
  letter-spacing: 2px;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  padding: 40px;
  line-height: 1.4em;
}

.top {
  box-shadow: 0 -5px 5px -5px #333;
}

.right {
  box-shadow: 5px 0 5px -5px #333;
}

.bottom {
  box-shadow: 0 5px 5px -5px #333;
}

.left {
  box-shadow: -5px 0 5px -5px #333;
}

<div class="boxes">
  <div class="box top">Top Only</div>
  <div class="box right">Right Only</div>
  <div class="box bottom">Bottom Only</div>
  <div class="box left">Left Only</div>
</div>

Here's a clever trick that I came up with.

<div id="element"><!--This is the element where I want to add a one-sided inset shadow from the bottom--></div> 
<div class="one_side_shadow"></div>

1. Insert a

<div class="one_side_shadow"></div>

2. Next, apply a regular box-shadow with a negative vertical offset to move the shadow upward to one side.

`box-shadow: 0 -8px 20px 2px #DEDEE3;`

Here's an easy method

border-left : 1px solid #ccc;
width:75px;    
box-shadow : 8px 0px 4px 1px #f0f0f0;

Apply this to a div element

This particular website really assisted me in understanding box shadows: https://gist.github.com/ocean90/1268328 (Please note that the left and right directions are reversed on that site at the time of writing this post... but they still function correctly). The corrected code is provided below.

<!DOCTYPE html>
<html>
    <head>
        <title>Box Shadow</title>

        <style>
            .box {
                height: 150px;
                width: 300px;
                margin: 20px;
                border: 1px solid #ccc;
            }

            .top {
                box-shadow: 0 -5px 5px -5px #333;
            }

            .right {
                box-shadow: 5px 0 5px -5px #333;
            }

            .bottom {
                box-shadow: 0 5px 5px -5px #333;
            }

            .left {
                box-shadow: -5px 0 5px -5px #333;
            }

            .all {
                box-shadow: 0 0 5px #333;
            }
        </style>
    </head>
    <body>
        <div class="box top"></div>
        <div class="box right"></div>
        <div class="box bottom"></div>
        <div class="box left"></div>
        <div class="box all"></div>
    </body>
</html>

box {
 border: 2px dashed #333;
    width: 80px;
    height: 80px;
    -moz-box-shadow: inset 15px 0px 10px -2px #999 ;
}

To create a shadow effect for my block element, I first create a vertical block specifically for the shadow. This shadow block is positioned next to where my main content block should be. Both blocks are then enclosed within another container:

<div id="wrapper">
    <div id="shadow"></div>  
    <div id="content">CONTENT</div>  
</div>

<style>

div#wrapper {
  width:200px;
  height:258px;      
}

div#wrapper > div#shadow {
  display:inline-block;
  width:1px;
  height:100%;
  box-shadow: -3px 0px 5px 0px rgba(0,0,0,0.8)
}

div#wrapper > div#content {
  display:inline-block;
  height:100%;
  vertical-align:top;
}

</style>

See an example on jsFiddle here.

Here is another approach to creating a shadow effect using pseudo elements.

html:

<div class="no-relevant-box">
  <div class="div-to-shadow-1"></div>
  <div class="div-to-shadow-2"></div>
</div>

sass:

.div-to-shadow-1, .div-to-shadow-2
  height: 150px
  width: 150px
  overflow: hidden
  transition: all 0.3s ease-in-out
  &::after
    display: block
    content: ''
    position: relative
    top: 0
    left: 100%
    height: 100%
    width: 10px
    border: 1px solid mediumeagreen
    box-shadow:  0px 7px 12px rgba(0,0,0,0.3)
  &:hover
    border: 1px solid dodgerblue
    overflow: visible

Check out the code here!