CODEWITHSUNDEEP
cssbox-shadow
MehranJ
MehranJ

Reputation: 133

CSS: box-shadow on four sides with blur effect

I'm trying to get box-shadow on all 4 sides of my element.

I've tried box-shadow: 4px 4px 4px 4px 5px grey but it doesn't work. There also doesn't seem to be a rule for specifically setting the blur of a box-shadow.

Upvotes: 2

Views: 15562

Answers (4)

user7148391
user7148391

Reputation:

If you have googled this a bit more, you would have found the answer right away.

The box-shadow property syntax is the fallowing :

box-shadow : horizontal offset | vertical offset | blur | spread | color ;

So you want it on all sides means :

  1. No offsets.
  2. Blur as you like.

Spread here is key to this, setting 10px to the spread means 5px on all sides, basically, half the amount will be on each facing side.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

div {
  padding: 30px;
  margin: 30px;
  width: 300px;
  height: 100px;
  padding: 15px;
  background-color: orange;
  box-shadow: 0px 0px 10px 10px grey;
}
<div></div>

Also if you want to customize that you always define multiple shadows separated by a comma.

Upvotes: 7

Ryan
Ryan

Reputation: 133

To get a box-shadow on all sides of your element, you'll need:

div {
    width: 300px;
    height: 100px;
    padding: 15px;
    background-color: lawngreen;
    box-shadow: 0 0 20px black;
}
<div>All of my sides have a box-shadow!</div>

Upvotes: 0

Friday Ameh
Friday Ameh

Reputation: 1684

Try this instead 5px specify the blur distance of the shadow while 10px specify the horizontal and vertical shadow of the box-shadow. You can check this link for more info https://www.w3schools.com/css/css3_shadows.asp

div {
    width: 300px;
    height: 100px;
    padding: 15px;
    background-color: yellow;
    box-shadow: 10px 10px 5px grey;
}
<body>

<div>This is a div element with a box-shadow</div>

</body>

or

you can modify yours like so box-shadow: 4px 4px 5px grey

Upvotes: 0

IP_
IP_

Reputation: 695

You have an extra value to box-shadow property. This works: box-shadow: 4px 4px 4px 5px grey

Upvotes: 0

Related Questions