What is the best way to add a box shadow to just one side of an element?

Question

What is the best way to add a box shadow to just one side of an element?

Is there a way to apply an inset box-shadow to only one side of a div? I am specifically referring to an inset shadow, not the usual outer box-shadow.

For instance, in the JSFiddle below, you can observe that the inset shadow is visible on all four sides, each with different intensity.

How can I make it appear ONLY at the top? Or possibly just at the 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>

css

Answer 1

Answer №1

Discover the solution you've been searching for, complete with examples for each side featuring a shadow effect.

.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);
}

Check out the snippet below for additional 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>

Answer 2

Discover the solution you've been searching for, complete with examples for each side featuring a shadow effect.

.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);
}

Check out the snippet below for additional 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>

Answer 3

Answer №2

Featuring a clever trick involving a second .box-inner element that is wider than the original .box, with the box-shadow applied to it.

To compensate for the increased width, additional padding is added to the .text.

This is the logic behind the design:

And this is how it's achieved using CSS:

Utilize max width for the .inner-box to prevent the .box from expanding, and use overflow to clip any excess content:

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

A width of 110% for the .box-inner ensures it is wider than its parent, negative margins center the element while compensating for the added width:

.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;
}

Add padding on the X axis to accommodate the wider .inner-box:

.text {
    padding: 20px 40px;
}

Check out the live demo on Fiddle!

Upon inspecting the Fiddle, you'll notice:

Answer 4

Featuring a clever trick involving a second .box-inner element that is wider than the original .box, with the box-shadow applied to it.

To compensate for the increased width, additional padding is added to the .text.

This is the logic behind the design:

And this is how it's achieved using CSS:

Utilize max width for the .inner-box to prevent the .box from expanding, and use overflow to clip any excess content:

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

A width of 110% for the .box-inner ensures it is wider than its parent, negative margins center the element while compensating for the added width:

.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;
}

Add padding on the X axis to accommodate the wider .inner-box:

.text {
    padding: 20px 40px;
}

Check out the live demo on Fiddle!

Upon inspecting the Fiddle, you'll notice:

Answer 5

Answer №3

Although it may be a bit delayed, an alternate response that avoids the need to adjust padding or insert additional divs can be located at this link: Encountering a problem with box-shadow Inset bottom only. The suggestion provided is to "Utilize a negative value for the fourth length parameter which specifies the spread distance. This aspect tends to be overlooked but is supported by all major browsers"

Referencing the individual's demo:

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

Answer 6

Although it may be a bit delayed, an alternate response that avoids the need to adjust padding or insert additional divs can be located at this link: Encountering a problem with box-shadow Inset bottom only. The suggestion provided is to "Utilize a negative value for the fourth length parameter which specifies the spread distance. This aspect tends to be overlooked but is supported by all major browsers"

Referencing the individual's demo:

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

Answer 7

Answer №4

This is somewhat near.

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

Answer 8

This is somewhat near.

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

Answer 9

Answer №5

If you're not finding exactly what you need, there is a way to achieve a similar effect by utilizing the rgba function in combination with a linear-gradient:

background: linear-gradient(rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%);

This code snippet creates a linear gradient transitioning from black with 50% opacity (rgba(0,0,0,.5)) to transparent (rgba(0,0,0,0)) starting at 30% from the top. You have the flexibility to adjust these values to get your intended outcome. By changing the degree value or swapping colors around, you can position it on a different side. For more intricate shadow effects like various angles on different sides, consider layering multiple linear-gradient instances.

Feel free to test this out with the following example:

.box {
  background: linear-gradient(rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%);
}

.text {
  padding: 20px;
}

<div class="box">
  <div class="text">
    Your content here...
  </div>
</div>

Answer 10

If you're not finding exactly what you need, there is a way to achieve a similar effect by utilizing the rgba function in combination with a linear-gradient:

background: linear-gradient(rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%);

This code snippet creates a linear gradient transitioning from black with 50% opacity (rgba(0,0,0,.5)) to transparent (rgba(0,0,0,0)) starting at 30% from the top. You have the flexibility to adjust these values to get your intended outcome. By changing the degree value or swapping colors around, you can position it on a different side. For more intricate shadow effects like various angles on different sides, consider layering multiple linear-gradient instances.

Feel free to test this out with the following example:

.box {
  background: linear-gradient(rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%);
}

.text {
  padding: 20px;
}

<div class="box">
  <div class="text">
    Your content here...
  </div>
</div>

Answer 11

Answer №6

Give it a shot, could be helpful...

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;

The CSS above creates a box shadow at the bottom.
For more information, check out This link

Answer 12

Give it a shot, could be helpful...

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;

The CSS above creates a box shadow at the bottom.
For more information, check out This link

Answer 13

Answer №7

It's simple to set all four sides at once using the standard box-shadow property. If you only want to set one side, you can achieve this by using a negative spread value. However, if you need to set two or three sides without adding extra div elements, you can make use of pseudo-elements like shown below:

.box-example {
    box-shadow: inset 0px 7px 9px -7px rgb(0 0 0 / 40%);
    height: 80px;
    border: 1px dashed grey;
    position: relative;
}
.box-example::after {
    content: " ";
    background-color: transparent;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    box-shadow: inset 0px -7px 9px -7px rgb(0 0 0 / 40%);
}
.box-example2 {
    box-shadow: inset 0px 7px 9px -7px rgb(0 0 0 / 40%);
    height: 80px;
    border: 1px dashed grey;
    position: relative;
    margin-top: 8px;
}
.box-example2::before,
.box-example2::after {
    content: " ";
    background-color: transparent;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    box-shadow: inset 0px -7px 9px -7px rgb(0 0 0 / 40%);
}
.box-example2::after {
    box-shadow: inset -7px 0px 9px -7px rgb(0 0 0 / 40%);
}

<div class="box-example">I have a top and bottom</div>
<div class="box-example2">I have a top, bottom, and right</div>

Answer 14

It's simple to set all four sides at once using the standard box-shadow property. If you only want to set one side, you can achieve this by using a negative spread value. However, if you need to set two or three sides without adding extra div elements, you can make use of pseudo-elements like shown below:

.box-example {
    box-shadow: inset 0px 7px 9px -7px rgb(0 0 0 / 40%);
    height: 80px;
    border: 1px dashed grey;
    position: relative;
}
.box-example::after {
    content: " ";
    background-color: transparent;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    box-shadow: inset 0px -7px 9px -7px rgb(0 0 0 / 40%);
}
.box-example2 {
    box-shadow: inset 0px 7px 9px -7px rgb(0 0 0 / 40%);
    height: 80px;
    border: 1px dashed grey;
    position: relative;
    margin-top: 8px;
}
.box-example2::before,
.box-example2::after {
    content: " ";
    background-color: transparent;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    box-shadow: inset 0px -7px 9px -7px rgb(0 0 0 / 40%);
}
.box-example2::after {
    box-shadow: inset -7px 0px 9px -7px rgb(0 0 0 / 40%);
}

<div class="box-example">I have a top and bottom</div>
<div class="box-example2">I have a top, bottom, and right</div>

Answer 15

Answer №8

How to apply Box Shadow exclusively on the Top side?

#container {
            background: #AAA;
            -webkit-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
            -moz-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
            box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
            font: bold 18px/1.2em serif;
            height: auto;
            margin: 15px auto;
            padding: 75px 15px 25px;
            text-align: center;
            width: 80%;
        }

Answer 16

How to apply Box Shadow exclusively on the Top side?

#container {
            background: #AAA;
            -webkit-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
            -moz-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
            box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
            font: bold 18px/1.2em serif;
            height: auto;
            margin: 15px auto;
            padding: 75px 15px 25px;
            text-align: center;
            width: 80%;
        }

Answer 17

Answer №9

It may seem impossible to achieve, but one workaround is to experiment with this CSS technique:

box-shadow: inset 0 4vw 7vw rgba(0,0,0,0.6), inset 0 -4vw 7vw rgba(0,0,0,0.6);

Answer 18

It may seem impossible to achieve, but one workaround is to experiment with this CSS technique:

box-shadow: inset 0 4vw 7vw rgba(0,0,0,0.6), inset 0 -4vw 7vw rgba(0,0,0,0.6);

Answer 19

Answer №10

This may be the most straightforward method:

box-shadow: inset 0 calc(7px + 42px) 0 -42px black;

You could also skip the calc() function and just use 49px instead; it's included for clarity or to follow the DRY principle (for example, with custom variables).

The third field [blur] is set to zero in order to prevent confusion; you are welcome to input any value in that position.

Answer 20

This may be the most straightforward method:

box-shadow: inset 0 calc(7px + 42px) 0 -42px black;

You could also skip the calc() function and just use 49px instead; it's included for clarity or to follow the DRY principle (for example, with custom variables).

The third field [blur] is set to zero in order to prevent confusion; you are welcome to input any value in that position.

What is the best way to add a box shadow to just one side of an element?

Answer №1

Answer №2

This is the logic behind the design:

And this is how it's achieved using CSS:

Check out the live demo on Fiddle!

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Answer №9

Answer №10

Similar questions

A step-by-step guide on how to display a specified amount of images in the center of

Achieve centered alignment for a website with floated elements while displaying the complete container background color

What is the trick to having the ball change colors every time it hits the wall?

What is the reason for requiring a style to be set instead of using a class?

An unexpected background image appearing from an external CSS file

Execute grunt serve:dist with local file paths enabled

Retrieve PHP variable from a PHP CSS file

Unable to adjust font weight as intended

"What might be causing the error 'cannot access property 'top' of undefined' while trying to read

What are the best practices for utilizing pre-defined CSS classes in Vue.js libraries?

Bootstrap 4.6 - new feature: flexible vertical pills and sleek horizontal tabs (inactive tab no longer highlighted)

What is the best way to arrange card-columns in a horizontal order?

Flexible layout of perfectly square elements

The CSS transition fails to function correctly when rendering a React element within an array

The TreeView control displays as a <div> element, which results in an unexpected line break

Emphasize the active item in the PHP header

Is it possible to dynamically adjust the size of the CircleProgressComponent element in ng-circle-progress?

Is it possible to employ getBoundingClientRect() for several elements sharing the same class?

Is it possible to automatically adjust the text color based on the dynamic background color?

Issue with TinyMCE Editor: Inoperative