CODEWITHSUNDEEP
cssbox-shadow
dragonfly
dragonfly

Reputation: 3227

How to apply box-shadow on all four sides?

I'm trying to apply a box-shadow on all four sides. I could only get it on 2 sides:

Upvotes: 120

Views: 318791

Answers (16)

Don199
Don199

Reputation: 167

I totally agree with Seshu Vuggina. Using box-shadow (specifically with inset) produces a great effect. https://codepen.io/don199/pen/abMLpLY

enter image description here dragonfly </div

.container{
  width: 100vw;
}  
.button {
    box-shadow: inset 0 0 1px 1px #595959;
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(166,166,166,1) 0%,   rgba(204,204,204,1) 50%, rgba(166,166,166,1) 100%);
    border: solid #b3b3b3 2px;
    text-shadow: 1px 1px 0px #ddd;
    padding: 4px 20px;
    cursor: pointer;
    margin: 0 auto;
    display: block;
  }

Upvotes: 0

HARI PRASAD GANGI
HARI PRASAD GANGI

Reputation: 41

box-shadow: 0px 0px 4px 4px #000;

Where:

  • The first 2 values are the offset-x and offset-y of the shadow
  • The 3rd value - blur radius
  • The 4th value - spread radius

Else, you can generate a box-shadow online, using CSS box shadow generator

Upvotes: 4

Sparsh Thakur
Sparsh Thakur

Reputation: 31

Just simple as this:

box-shadow: 3px 3px 5px rgb(186 195 78), -3px -3px 5px rgb(186 195 78);

Upvotes: 3

chess_madridista
chess_madridista

Reputation: 193

Make the x and y offsets negative to apply the shadows on left and top sides of the container as well.

div { box-shadow: 1px 1px 1px 1px #BDBDBD, -1px -1px 1px 1px #BDBDBD; }

In the above code block,

  1. 1px 1px 1px 1px #BDBDBD is for adding shadows to the right and bottom sides.
  2. -1px -1px 1px 1px #BDBDBD is for adding shadows to the top and left sides.

Upvotes: 0

Rubel Biswas
Rubel Biswas

Reputation: 1434

Add this line to your box style.

box-shadow: 0 0 0 width color;

as example:

box-shadow: 0 0 0 5px yellow;

You can find more details here MDN Web Docs - Setting zero for offset and blur

Upvotes: 0

chiefdakwa
chiefdakwa

Reputation: 33

Using (v1)px (v2)px (v3)px (v4)px as an example. v1px when positive gives right side shadow whiles negative value gives left side shadow. v2px when positive gives top side shadow whiles negative value gives bottom side shadow. v3 is used for making the shadow blur. 10px will make shadow more blur than 5px and so on So using a div (mydiv) with style below. We will get the image below

box-shadow:
30px 0px 5px 0px red,
0px 30px 5px 0px blue,
-30px 0px 5px 0px green,
0px -30px 5px 0px yellow;
width:200px;
height:200px;
margin-left:100px;
}

<br><br>

<div class="mydiv"></div>

This should give you the div below
view the result from this link: https://i.sstatic.net/bUjRN.jpg

Upvotes: 0

xgqfrms
xgqfrms

Reputation: 12136

CSS3 box-shadow: 4 sides symmetry

  1. each side with the same color

:root{
  --color: #f0f;
}

div {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 50px auto;
  width: 200px;
  height: 100px;
  background: #ccc;
}

.four-sides-with-same-color {
  box-shadow: 0px 0px 10px 5px var(--color);
}
<div class="four-sides-with-same-color"></div>

  1. each side with a different color

:root{
  --color1: #00ff4e;
  --color2: #ff004e;
  --color3: #b716e6;
  --color4: #FF5722;
}

div {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 50px auto;
  width: 200px;
  height: 100px;
  background-color: rgba(255,255,0,0.7);
}

.four-sides-with-different-color {
  box-shadow: 
    10px 0px 5px 0px var(--color1),
    0px 10px 5px 0px var(--color2),
    -10px 0px 5px 0px var(--color3),
    0px -10px 5px 0px var(--color4);
}
<div class="four-sides-with-different-color"></div>

screenshots

refs

https://css-tricks.com/almanac/properties/b/box-shadow/

https://www.cnblogs.com/xgqfrms/p/13264347.html

Upvotes: 3

Seshu Vuggina
Seshu Vuggina

Reputation: 823

Understand box-shadow syntax and write it accordingly

box-shadow: h-offset v-offset blur spread color;

h-offset: Horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box - Required

v-offset: Vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box - Required

blur: Blur radius (The higher the number, the more blurred the shadow will be) - Optional

color: Color of the shadow - Optional

spread: Spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow - Optional

inset: Changes the shadow from an outer shadow to an inner shadow - Optional

box-shadow: 0 0 10px #999;

box-shadow works better with spread

box-shadow: 0 0 10px 8px #999;

use 'inset' to apply shadow inside of the box

box-shadow: 0 0 8px inset #999;
(or)
box-shadow: 0 0 8px 8px inset #999;

use rgba (red green blue alpha) to adjust the shadow more efficiently

box-shadow: 0 0 8px inset rgba(153, 153, 153, 0.8); 
(or)
box-shadow: 0 0 8px 8px inset rgba(153, 153, 153, 0.8);

Upvotes: 15

Ans
Ans

Reputation: 3571

You can different combinations at the following link.
https://www.cssmatic.com/box-shadow

The results which you need can be achieved by the following CSS

-webkit-box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);

Upvotes: 0

Cipher
Cipher

Reputation: 2122

The most simple solution and easiest way is to add shadow for all four side. CSS

box-shadow: 0 0 2px 2px #ccc; /* with blur shadow*/
box-shadow: 0 0 0 2px #ccc; /* without blur shadow*/

Upvotes: 6

Bal mukund kumar
Bal mukund kumar

Reputation: 363

Use this css code for all four sides: box-shadow: 0px 1px 7px 0px rgb(106, 111, 109);

Upvotes: 0

Pankskie
Pankskie

Reputation: 231

Just simple as this code:

box-shadow: 0px 0px 2px 2px black; /*any color you want*/

Upvotes: 23

user3619130
user3619130

Reputation: 55

I found the http://css-tricks.com/forums/topic/how-to-add-shadows-on-all-4-sides-of-a-block-with-css/ site.

.allSides
{
    width:350px;height:200px;
    border: solid 1px #555;
    background-color: #eed;
    box-shadow: 0 0 10px rgba(0,0,0,0.6);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6);
    -o-box-shadow: 0 0 10px rgba(0,0,0,0.6);
}

Upvotes: 4

Nalan Madheswaran
Nalan Madheswaran

Reputation: 10562

This looks cool.

-moz-box-shadow: 0 0 5px #999;
-webkit-box-shadow: 0 0 5px #999;
box-shadow: 0 0 5px #999;

Upvotes: 11

Damb
Damb

Reputation: 14600

It's because of x and y offset. Try this:

-webkit-box-shadow: 0 0 10px #fff;
        box-shadow: 0 0 10px #fff;

edit (year later..): Made the answer more cross-browser, as requested in comments :)

btw: there are many css3 generator nowadays.. css3.me, css3maker, css3generator etc...

Upvotes: 200

thirtydot
thirtydot

Reputation: 228162

See: http://jsfiddle.net/thirtydot/cMNX2/8/

input {
    -webkit-box-shadow: 0 0 5px 2px #fff;
    -moz-box-shadow: 0 0 5px 2px #fff;
    box-shadow: 0 0 5px 2px #fff;
}

Upvotes: 42

Related Questions