CSS box-shadow

CSS box-shadow Parameters Details
- inset - by default, the shadow is treated as a drop shadow. the inset keyword draws the shadow inside the frame/border.
- offset-x - the horizontal distance
- offset-y - the vertical distance
- blur-radius - 0 by default. value cannot be negative. the bigger the value, the bigger and lighter the shadow becomes.
- spread-radius- 0 by default. positive values will cause the shadow to expand. negative values will cause the shadow to shrink.
- color - can be of various notations: a color keyword, hexadecimal, rgb(), rgba(), hsl(), hsla()
bottom-only drop shadow using a pseudoelement:
HTML
<div class="box_shadow"></div>
CSS
.box_shadow {
background-color: #1C90F3;
width: 200px;
height: 100px;
margin: 50px;
}
.box_shadow:after {
content: "";
width: 190px;
height: 1px;
margin-top: 98px;
margin-left: 5px;
display: block;
position: absolute;
z-index: -1;
-webkit-box-shadow: 0px 0px 8px 2px #444444;
-moz-box-shadow: 0px 0px 8px 2px #444444;
box-shadow: 0px 0px 8px 2px #444444;
}
OUTPUT:
drop shadow
JSFiddle: https://jsfiddle.net/UnsungHero97/80qod7aL/
HTML
<div class="box_shadow"></div>
CSS
.box_shadow {
-webkit-box-shadow: 0px 0px 10px -1px #444444;
-moz-box-shadow: 0px 0px 10px -1px #444444;
box-shadow: 0px 0px 10px -1px #444444;
}
inner drop shadow
HTML
<div class="box_shadow"></div>
CSS
.box_shadow {
background-color: #1C90F3;
width: 200px;
height: 100px;
margin: 50px;
-webkit-box-shadow: inset 0px 0px 10px 0px #444444;
-moz-box-shadow: inset 0px 0px 10px 0px #444444;
box-shadow: inset 0px 0px 10px 0px #444444;
}
Result:
multiple shadows
JSFiddle: https://jsfiddle.net/UnsungHero97/80qod7aL/5/
HTML
<div class="box_shadow"></div>
CSS
.box_shadow {
width: 100px;
height: 100px;
margin: 100px;
box-shadow:
-52px -52px 0px 0px #f65314,
52px -52px 0px 0px #7cbb00,
-52px 52px 0px 0px #00a1f1,
52px 52px 0px 0px #ffbb00;
}
OUTPUT:
ATutorialHub Related Guide
Comments (9)
User Comments

panduranga gupta
2021-07-05 07:03:13good website for learning and help me a lot

raju
2021-09-25 14:58:47The awsome website i am looking like for a long time, good work atutorialhub team keep doing

Shivani
2021-09-01 15:03:56Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

Harshitha
2021-09-10 15:05:45It is very helpful to students and easy to learn the concepts

Sowmya
2021-09-14 15:06:41Great job Tutorials are easy to understand Please make use of it

Zain Khan
2021-09-18 15:07:23Great content and customized courses.

Rudrakshi Bhatt
2021-09-09 15:08:10Well structured coursed and explained really well!

Pavana Somashekar
2021-09-11 15:09:08Good platform for beginners and learn a lot on this website

Sax
2021-09-25 19:35:50Nice website
Leave a Comment