CSS box-shadow

CSS box-shadow
Nikhil
Published on 2021-07-08 17:22:45

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 (8)

Leave a Comment

Your email address will not be published. Required fields are marked*

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website