CSS inset shadow all sides
- What is Box shadow
- Create simple box-shadow
- Inset box-shadow
- Double color shadow
What is Box shadow
CSS inset shadow all sides is well they’re cool or may be one of the easiest ways to make your design just look . It isn’t a complicated property but there are lots of parts to it. So dive into all the values you can place here. You can apply multiple shadows and box shadow is a bit of a weird property, because it accepts between two and six values. Start with two values and you’ll work our way up from there. You add a box shadow and mentioned have give it at least two values, so the first two values have to means numbers.
With this property you are putting a shadow on the content box text shadow put the shadow on the text it self. It takes the content box for the whatever you’re working with, so here got shrunk it down. You put some padding inside the box the padding is between the text and the edges of the content box.
You want to put a box shadow gets for individual values the first two are the horizontal and vertical displacement. Third one is the blur radius and the fourth one is the color. If you want to make these negative values and the third value of blur is a CSS inset shadow all sides as you can probably guess this value is the blur. You can apply 20px in blur, it means is it will go from solid color. A gradual decline in opacity as you go along now you can make the blur as big and you want it softer.
One think unlike the vertical and horizontal offsets, we cannot make the blur a negative value and it does not accept negative values here. You can a zero that’s the default that’s we had before and any positive number will work. Before if you want to do this in MS or REMS you can easily do that as well.
Create simple box-shadow
The fourth property you can add in here let’s just put back to 20px. You going to do another value here and now this is an often misunderstood one . The spread what is pretty much means is take 20px and then start the blur. Take this off and let’s do a (0,0) so you have no horizontal and no vertical offset. You gonna put a glare of 20px and run that see you have blur coming on there. Add a spread of 20px it’s pretty much making my blur start further out. So it’s pushing everything away a little bit and you can make that 200px, I think get much bigger. Now one thing unlike this property which cannot take negative this one can take a negative. It’s very important and very useful for some once you start getting into some more advanced stuff sometimes.
Finally you add a color but there are a few things to know about color before. It’s actually matching the color property, You didn’t know that . You do change color red your shadow will actually change to red. So, it’s always inheriting that except well not exactly as useful as this could be don’t reply on it. You cannot use specific color for css inset shadow all sides use RGBA values or HSLA and come on to a rgba(0,0,0,0.5) that will just give mea bit more of a subtle drop shadow.
Syntax:
Box-shadow :0 0 20px 20px rgba(0,0,0,0.5);
CSS inset shadow all sides
CSS inset shadow all sides can use another value that we can do in this one actually has to go all the way at the beginning here its called inset. Do that and you’ll see what it is right away it moves the shadow to inside of the box instead of the outside of the box. One thing that’s important to know an inset shadow it will always be on top of the background color but, under the content. It makes it look like sort of cut there’s a hole in it and it’s this is showing behind my original background. So the inset you don’t see it used very often it can be used in really nice fun and creative ways to get some nice effects. Now one thing that’s important is that as we so at the stat the only required properties are the vertical and horizontal offset.
CSS Inset Syntax:
CSS inset shadow all sides:
Box-shadow: inset 0 0 20px 0 rgba(0,0,0,0.6);
Left and Top only:
Box-shadow: inset 20px 20px rgba(0,0,0,0.6);
Right and Bottom only:
Box-shadow: inset -20px -20px rgba(0,0,0,0.6);
Top and Bottom only:
Box-shadow: inset 0px -8px 6px -6px,
inset 0px 8px 6px -6px ;
Left and Right only:
Box-shadow: inset -8px 0px 6px -6px,
inset 8px 0px 6px -6px;
Double color shadow
If you create two box shadow in one container they first one is off and the second of the box-shadow property is active/working. So instead of trying to do it, you just have to come and separate them . And you can save and see you have both red and black are visible as the same shadow. Not just two but more than two colors can be added as shadows.
Syntax:
Box-shadow: 20px 20px 20px black, 30px 30px 30px red;
