How to apply box-shadow on all four sides?
Solution 1
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...
Solution 2
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;
}
Solution 3
Just simple as this code:
box-shadow: 0px 0px 2px 2px black; /*any color you want*/
Solution 4
This looks cool.
-moz-box-shadow: 0 0 5px #999;
-webkit-box-shadow: 0 0 5px #999;
box-shadow: 0 0 5px #999;
Solution 5
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);
Related videos on Youtube
dragonfly
Updated on June 22, 2021Comments
-
dragonfly almost 3 years
I'm trying to apply a
box-shadow
on all four sides. I could only get it on 2 sides:-
sscirrusCSS3please.com is always helpful for this kind of stuff...
-
-
dragonfly about 13 yearsI know what each value is for in box shadow with 3 value + color. what is this 4 value stands for??
-
thirtydot about 13 yearsRead: developer.mozilla.org/En/CSS/Box-shadow - specifically, it's the "spread radius".
-
Ahmad Ismail over 9 yearsit is appropriate as the other answers in this site, but as you are striving, i am up voting your answer.
-
Terrance00 over 8 yearsFiddle creator - MVP.