Codepen example: https://codepen.io/any_formless/pen/RwKgGOm
My box shadow is different on the sides than on the top, and the bottom is totally missing.
.example {
border-radius: 3vw;
box-shadow: inset 10px 10px 10px -10px rgb(0 0 0), inset -10px 10px 10px -10px rgb(0 0 0);
text-align: center;
padding: 5vw;
}
<div class="example">Text</div>
The applicable syntax for the box-shadow property is:
/* inset | offset-x | offset-y | blur-radius | spread-radius | color */
This is not to be confused with the shorthand syntax for certain box-model properties (e.g. margin or padding) which is:
/* top | right | bottom | left */
To achieve an evenly placed border, offset-x and offset-y should be 0:
.example {
border-radius: 3vw;
box-shadow: inset 0 0 10px 10px rgb(0 0 0);
text-align: center;
padding: 5vw;
}
<div class="example">Text</div>
Multiple independent shadows can be created using commas.
The original example is essentially creating two overlapping shadows, one for the top/left and one for the top/right:
.example {
border-radius: 3vw;
box-shadow:
inset 6px 5px 5px 0 rgb(0 0 0), /* left and top */
inset -6px 5px 5px 0 rgb(0 0 0) /* right and top */
;
text-align: center;
padding: 5vw;
}
<div class="example">Text</div>
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
Hello use something like this:
.example {
box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.75) inset;
-webkit-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.75) inset;
-moz-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.75) inset;
}
Also, don't forget to make the last px before rgba the same number for all.
If you use 4 values before color for box-shadow, respectively they mean:
offset-x, offset-y, blur-radius, spread-radius
For your example, if you would like to have all sides equal, you should not give any value to offset-x and offset-y.
So, something like that:
.example {
border-radius: 3vw;
box-shadow: inset 0 0 10px -10px rgb(0 0 0), inset 0 0 10px -10px rgb(0 0 0);
text-align: center;
padding: 5vw;
}
<div class="example">Text</div>
i am using the following code to make a shadow inside a div tag..
box-shadow: inset 0 10px 10px -10px #000 , inset 0 -10px 10px -10px #000;
but i get shadows on the top and bottom.. i only want the shadow to appear on top not the botton something like the following picture..
i'e been tinkering with the codes for hours but nothing... how can i do this. thanks.
Like this?
box-shadow: inset 0 10px 20px -15px #000;
DEMO
You need to delete the part after the comma.
box-shadow: inset 0 10px 10px -10px #000;
http://jsfiddle.net/9LzV4/
-webkit-box-shadow:inset 0 3px 5px 0 #E3E3E3;
box-shadow:inset 0 3px 5px 0 #E3E3E3;
for more experiments go to css3 generator
-webkit-box-shadow: inset 0px 6px 16px 0px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 6px 5px 0px rgba(0,0,0,0.75);
box-shadow: inset 0px 6px 5px 0px rgba(0,0,0,0.75);
Demo
I need to create this shadow effect for a client but can't figure out how it could be done:
Is this even possible with pure CSS?
EDIT: Here is my current CSS:
box-shadow: 0 0px 0px #fff,
0 -1px 15px #ccc,
0 0px 0px #fff,
0 0px 0px #fff;
-webkit-box-shadow: 0 0px 0px #fff,
0 -1px 15px #ccc,
0 0px 0px #fff,
0 0px 0px #fff;
-moz-box-shadow: 0 0px 0px #fff,
0 -1px 15px #ccc,
0 0px 0px #fff,
0 0px 0px #fff;
this other answer that I stole from Another Stack OverFlow Question
use the spread value...
box-shadow has the following values
box-shadow: x y blur spread color;
so you could use something like..
box-shadow: 0px -10px 10px -10px black;
here is another answer from the same Question
You can give multiple values to box-shadow property
eg
-moz-box-shadow: 0px 10px 12px 0px #000,
0px -10px 12px 0px #000;
-webkit-box-shadow: 0px 10px 12px 0px #000,
0px -10px 12px 0px #000;
box-shadow: 0px 10px 12px 0px #000,
0px -10px 12px 0px #000;
it is drop shadow to left and right only, you can adapt it to your requirements
EDIT
I was looking that the OP's Post and I think that if you tried this,
box-shadow: 0 0px 0px #fff,
0 -1px 15px #ccc,
0 0px 0px #fff,
0 -1px 15px #ccc;
I think that it should show the way that you are thinking it should.
I assume that the values go in Clockwise Order like Borders or margins or whatever,
Attribute: top, right, bottom, left;
and that you should be able to add a value to the left as you would with the right.
you might have to play around with it a little bit though.
I want to have both and outer shadow and an inner (inset) shadow on the same element, is this possible? Right now I have this:
box-shadow: 0 4px 2px -2px #888;
box-shadow: inset 0 0 30px #EEE;
with this the inset shadow overrides the normal box-shadow, any suggestions?
Yes. Separate them with a comma:
box-shadow: inset 0 0 30px #EEE, 0 4px 2px -2px #888;
You can have up to six I believe.
here is an example of what you want fiddle
box-shadow:0 0 30px #222 inset, 0 4px 2px -2px #888;
I'm trying to apply a box-shadow on all four sides. I could only get it on 2 sides:
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...
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;
}
Just simple as this code:
box-shadow: 0px 0px 2px 2px black; /*any color you want*/
This looks cool.
-moz-box-shadow: 0 0 5px #999;
-webkit-box-shadow: 0 0 5px #999;
box-shadow: 0 0 5px #999;
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);
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*/
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);
}
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
CSS3 box-shadow: 4 sides symmetry
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>
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
Just simple as this:
box-shadow: 3px 3px 5px rgb(186 195 78), -3px -3px 5px rgb(186 195 78);
Use this css code for all four sides:
box-shadow: 0px 1px 7px 0px rgb(106, 111, 109);
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);
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.stack.imgur.com/bUjRN.jpg
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
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,
1px 1px 1px 1px #BDBDBD is for adding shadows to the right and bottom sides.
-1px -1px 1px 1px #BDBDBD is for adding shadows to the top and left sides.