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 :
- No offsets.
- 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.
Answer from user7148391 on Stack OverflowIf 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 :
- No offsets.
- 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.
You have an extra value to box-shadow property. This works: box-shadow: 4px 4px 4px 5px grey
css - Seamless box-shadow for blurry effect - Stack Overflow
html - Box-shadow side-effect blur not smooth. inner square in shadow - Stack Overflow
Simple trick to make your box-shadows look much better
I've done graphic design for many years and this applies to anything you want to make a drop shadow for, it requires 4 layers but the effect is flawless in appearance.
Excellent tip for applying this to css.
More on reddit.comUse colored Box Shadow in Tailwind CSS for NProgress Glow effect?
Videos
For circular box-shadows the blur cannot go above the width & height of the element. The spread can though.
Since your element is 200px * 200px, the maximum for the blur value is 200px.
Have a look below at the example which doesn't go above 200px and you will see that it creates the box-shadow as expected
div {
width: 200px;
height: 200px;
border-radius: 100px;
background-color: blue;
box-shadow: 169px 129px 200px -15px rgba(0, 0, 0, 1);
}
<div></div>
The spread value can alternatively go above the element width and height and therefore you can make bigger spreads.
div {
width: 200px;
height: 200px;
border-radius: 100px;
background-color: blue;
box-shadow: 169px 129px 0 250px rgba(0, 0, 0, 1);
}
<div></div>
You also didn't really need the prefixes since CSS3 Box-shadows are very well supported now. CanIUse
You can read more about CSS Box shadows in the MDN Documentation
If you want to go outside its dimensions on the shape to be blurred:
The code creates a copy of the circle then colours it black and uses the filter:blur(length);
.circle {
border-radius: 50%;
width: 100px;
height: 100px;
position: relative;
}
.circle::after {
position: absolute;
display: block;
content: " ";
border-radius: 50%;
width: 100%;
height: 100%;
background-color: blue;
}
.circle::before {
position: absolute;
display: block;
content: " ";
border-radius: 50%;
width: 100%;
height: 100%;
background-color: black;
top: 50%;
left: 50%;
-webkit-filter: blur(50px);
filter: blur(50px);
}
<div class="circle"></div>
You can also create inset shadows this way.
How it works: 1. The initial shape is the shadow-color 2. Set overflow:hidden so nothing goes outside the shape. 3. Put a shape on top 4. Blur the shape on top
By doing this the shape under shines through creating the inner shadow effect
.circle {
border-radius: 50%;
width: 100px;
height: 100px;
position: relative;
background-color: black;
overflow: hidden;
}
.circle::before {
position: absolute;
display: block;
content: " ";
border-radius: 50%;
width: calc(100%);
height: calc(100%);
background-color: blue;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
-webkit-filter: blur(20px);
filter: blur(20px);
}
<div class="circle"></div>
