How to create a inset box-shadow only on one side?

box-shadow: inset
box-shadow generator
inset box-shadow top and bottom only
box-shadow: inset left and right only
box-shadow on specific side
box shadow on left and right side
inset shadow sides only
box-shadow only left and right

Is it possible to somehow only have inset box-shadow on one side of a div ? Note that I'm talking about an inset box-shadow here, not the normal outer box-shadow.

For example, in the following JSFiddle, you'll see that the inset shadow appears on all 4 sides, in varying degrees.

How do I get it to ONLY show at the top ? Or at most ONLY at top and bottom ?

JSFiddle: http://jsfiddle.net/ahmadka/KFrun/

.box {
  -webkit-box-shadow: inset 0px 5px 10px 1px #000000;
  box-shadow: inset 0px 5px 10px 1px #000000;
}

.text {
  padding: 20px;
}
<div class="box">
  <div class="text">
    Lorem ipsum ....
  </div>
</div>

This is what you are looking for. It has examples for each side you want with a shadow.

.top-box
{
    box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.4);
}
.left-box
{
    box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.4);
}
.right-box
{
    box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.4);
}
.bottom-box
{
    box-shadow: inset 0 -7px 9px -7px rgba(0,0,0,0.4);
}

See the snippet for more examples:

body {
    background-color:#0074D9;
}
div {
    background-color:#ffffff;
    padding:20px;
    margin-top:10px;
}
.top-box {
    box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.7);
}
.left-box {
    box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.7);
}
.right-box {
    box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.7);
}
.bottom-box {
    box-shadow: inset 0 -7px 9px -7px rgba(0,0,0,0.7);
}
.top-gradient-box {
    background: linear-gradient(to bottom, #999 0, #ffffff 7px, #ffffff 100%);
}
.left-gradient-box {
    background: linear-gradient(to right, #999 0, #ffffff 7px, #ffffff 100%);
}
.right-gradient-box {
    background: linear-gradient(to left, #999 0, #ffffff 7px, #ffffff 100%);
}
.bottom-gradient-box {
    background: linear-gradient(to top, #999 0, #ffffff 7px, #ffffff 100%);
}
<div class="top-box">
        This area has a top shadow using box-shadow
</div>

<div class="left-box">
        This area has a left shadow using box-shadow
</div>

<div class="right-box">
        This area has a right shadow using box-shadow
</div>

<div class="bottom-box">
        This area has a bottom shadow using box-shadow
</div>

<div class="top-gradient-box">
        This area has a top shadow using gradients
</div>
<div class="left-gradient-box">
        This area has a left shadow using gradients
</div>
<div class="right-gradient-box">
        This area has a right shadow using gradients
</div>
<div class="bottom-gradient-box">
        This area has a bottom shadow using gradients
</div>

CSS box-shadow: Inner Shadow on the right, I do have another question with the box shadow. How can I make it so it only shows the top and bottom shadows? I have this which kind of� Does anyone know how to apply inset box shadow to a single edge without the spread displaying unwanted inner shadow on other edges? For example, I want to use this code to create a left inner shadow, but the other three sides are being affected. box-shadow: inset 1px 0px 6px #ccc;

The trick is a second .box-inner inside, which is larger in width than the original .box, and the box-shadow is applied to that.

Then, added more padding to the .text to make up for the added width.

This is how the logic looks:

And here's how it's done in CSS:

Use max width for .inner-box to not cause .box to get wider, and overflow to make sure the remaining is clipped:

.box {
    max-width: 100% !important;
    overflow: hidden;
}

110% is wider than the parent which is 100% in a child's context (should be the same when the parent .box has a fixed width, for example). Negative margins make up for the width and cause the element to be centered (instead of only the right part hiding):

.box-inner {
    width: 110%;
    margin-left:-5%;
    margin-right: -5%;
    -webkit-box-shadow: inset 0px 5px 10px 1px #000000;
    box-shadow: inset 0px 5px 10px 1px #000000;
}

And add some padding on the X axis to make up for the wider .inner-box:

.text {
    padding: 20px 40px;
}
Here's a working Fiddle.

If you inspect the Fiddle, you'll see:

How to add a box-shadow on one side of an element using CSS , inset: By default the shadow generates outside the box but inset value can be used to create shadow inside the box. Example 3: This example� Is it possible to somehow only have inset box-shadow on one side of a div ? Note that I’m talking about an inset box-shadow here, not the normal outer box-shadow.. For example, in the following JSFiddle, you’ll see that the inset shadow appears on all 4 sides, in varying degrees.

Quite a bit late, but a duplicate answer that doesn't require altering the padding or adding extra divs can be found here: Have an issue with box-shadow Inset bottom only. It says, "Use a negative value for the fourth length which defines the spread distance. This is often overlooked, but supported by all major browsers"

From the answerer's fiddle:

box-shadow: inset 0 -10px 10px -10px #000000;

Box Shadow isolated to one side, Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself. <div class="inner-shadow-bottom box">bottom inset</div >. 10 1. body{ background: #ccc; padding: 20px;}. 2 .left{ float:left; margin-left: 20px;}. 3. . 4 margin-bottom: 20px;. 11 box-shadow: 0 8px 10px -6px black;. Positioning first, 10px (horizontal offset sends it to the right and 0px (vertical offset) keeps it hidden under it's parent element. Radius next, so 5px is the blur radius. Then the fourth -2px

This comes a little close.

.box
{
    -webkit-box-shadow: inset -1px 10px 5px -3px #000000;
    box-shadow: inset -1px 10px 5px -3px #000000;
}

How to create box shadow on only one side - HTML & CSS, I'm trying to figure a way to add a box shadow but to only one side. border- radius: 0px 0px 12px 12px; -webkit-box-shadow: inset -2px -3px� You can accomplish a single-sided, inner shadow by setting your div to overflow:hidden and adding shadow elements along the borders. Set an inner shadow on the top and bottom borders of a division: HTML. <div id="innerShadow"> <div id="innerShadowTop"> Content <div id="innerShadowBottom"> </div>. CSS.

try it, maybe useful...

box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 3px #cbc9c9;
                    -webkit-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9;
                    -o-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9;
                    -moz-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9;  

above CSS cause you have a box shadow in bottom. you can red more Here

One-Sided Box-Shadows with CSS, When creating a box-shadow on one side only, we have to focus on the last value, the spread radius. The spread radius decreases the overall� inset box-shadow creates a nice uniform shadow with the top and bottom cut off. To use this effect on the sides of your element, create two pseudo elements :before and :after positioned absolutely on the sides of the original element.

How to Set a Box-Shadow Only on the Left and Right Sides, If you want to add a box-shadow only on the left and right sides of an element, Probably, the best way is using the CSS box-shadow property with the “inset” Note, that in the example above, we also have a little shadow on the top and bottom Box-Shadow on One Side of the Element � How to Create a Drop Shadow for� You can expand the shadow with a negative value to hide the other sides. This code creates a 5px black inset shadow on the left side of the box only: box-shadow: inset 5px 0 5px -5px #000; Just repeat the needed shadow width in the values to get the effect. You can use multiple shadows to get inset shadows e.g. for top and bottom only.

CSS3: spread value and box-shadow on one side only :: Fleeting , Create the look of multiple borders. div { border: 3px solid orange; -webkit-box- shadow: 0 0 0 3px black, 0 0 0 6px red; -� The box-shadow property attaches one or more shadows to an a negative value puts the shadow on the left side of the box: box-shadow: 5px 10px inset;}

box-shadow, The box-shadow CSS property adds shadow effects around an element's frame. If only two values are given, they are interpreted as <offset-x><offset-y> values. The presence of the inset keyword changes the shadow to one inside the … for a long, straight shadow edge, this should create a color� CSS3 Box Shadow, only top/right/bottom/left and all - box-shadow.html .shadow-inset { box-shadow: inset 0 0 20px rgba(115,115,115,0.75); } This is good except

Comments
  • An alternate (and fully customizable) way would be a background gradient ...
  • Possible duplicate of How to get box-shadow on left & right sides only
  • How can you just post the link to fiddle without the code? :O
  • Man! That's a SO hack! Cool :P
  • In my Firefox I can't see the text at the right and left border. The text is simply cut off. (Here is screen shot goo.gl/aO8ZX) I have try it myself and used some extra div to hide the shadow... jsfiddle.net/KFrun/19
  • Yes i use jsfiddle.net/KFrun/6/ Is it possibly some Firefox version problem? I use the Firefox 21.0 for Ubuntu...
  • But there is still a shadow underneath
  • That's what I tried! But he didn't wanted that so didn't posted it as the answer! :(
  • Big Like. Thank You ❤️
  • There can be a simplest answer than this one (at least for the moment). Thanks