CSS box-shadow Property
The box-shadow property in CSS is used to give a shadow-like effect to the frames of an element. The multiple effects can be applied to the element’s frame which is separated by the comma. The box-shadow can be described using X and Y offsets relative to the element, blur and spread radius, and color.
Syntax:
box-shadow: h-offset v-offset blur spread color |none|inset|initial| inherit;
Default Value : Its default value is none.
Property Value: All the properties are described well with the example below.
- h-offset: It is required to set the position of the shadow horizontally. The positive value is used to set the shadow on the right side of the box and a negative value is used to set the shadow on the left side of the box.
- v-offset: It is required to set the position of shadow value vertically. The positive value is used to set the shadow below to the box and a negative value is used to set the shadow above the box.
- blur: It is an optional attribute, the work of this attribute is to blur the shadow of the box.
Syntax:
box-shadow: h-offset v-offset blur;
Example: This example illustrates the use of the box-shadow property where properties such as h-offset, v-offset & blur are applied along with their values.
HTML
<!DOCTYPE html> < html > < head > < title >CSS box-shadow Property</ title > < style > .gfg1 { border: 1px solid; padding: 10px; /* box-shadow: h-offset v-offset blur */ box-shadow: 5px 10px 10px; } .gfg2 { border: 1px solid; padding: 10px; /* box-shadow: h-offset v-offset blur */ box-shadow: 5px 10px 28px; } </ style > </ head > < body > < div class = "gfg1" > < h1 >Welcome to GeeksforGeeks!</ h1 > </ div > < br >< br > < div class = "gfg2" > A computer Science portal </ div > </ body > </ html > |
Output:
spread: It is used to set the size of the shadow. The size of the spread depends on the value of the spread.
Syntax:
box-shadow: h-offset v-offset blur spread;
Example: This example illustrates the use of the box-shadow property where the spread property is applied to set the size of the shadow.
HTML
<!DOCTYPE html> < html > < head > < title >CSS box-shadow Property</ title > < style > .gfg1 { border: 1px solid; padding: 10px; /* box-shadow: h-offset v-offset blur spread */ box-shadow: 5px 10px 10px 10px; } .gfg2 { border: 1px solid; padding: 10px; /* box-shadow: h-offset v-offset blur spread */ box-shadow: 5px 10px 28px 20px; } </ style > </ head > < body > < div class = "gfg1" > < h1 >Welcome to GeeksforGeeks!</ h1 > </ div > < br >< br > < div class = "gfg2" > A computer Science portal </ div > </ body > </ html > |
Output:
color: It is an optional attribute and is used to set the color of the shadow.
Syntax:
box-shadow: h-offset v-offset color;
Example: This example illustrates the use of the box-shadow property where different color shade is applied.
HTML
<!DOCTYPE html> < html > < head > < title >CSS box-shadow Property</ title > < style > .gfg1 { border: 1px solid; padding: 10px; /* box-shadow: h-offset v-offset blur spread color */ box-shadow: 5px 10px 10px 10px green; } .gfg2 { border: 1px solid; padding: 10px; /* box-shadow: h-offset v-offset blur spread color */ box-shadow: 5px 10px 28px 20px green; } </ style > </ head > < body > < div class = "gfg1" > < h1 >Welcome to GeeksforGeeks!</ h1 > </ div > < br >< br > < div class = "gfg2" > A computer Science portal </ div > </ body > </ html > |
Output:
inset: By default, the shadow generates outside the box. But using the inset, we can create the shadow inside the box.
Syntax:
box-shadow: h-offset v-offset color inset;
Example: This example illustrates the use of the box-shadow property where inset property is applied to make the shadow inside the box.
HTML
<!DOCTYPE html> < html > < head > < title >CSS box-shadow Property</ title > < style > .gfg1 { border: 1px solid; padding: 10px; /* box-shadow: h-offset v-offset blur spread color inset */ box-shadow: 5px 10px 10px 10px green inset; } .gfg2 { border: 1px solid; padding: 10px; /* box-shadow: h-offset v-offset blur spread color inset */ box-shadow: 5px 10px 28px 20px green inset; } </ style > </ head > < body > < div class = "gfg1" > < h1 >Welcome to GeeksforGeeks!</ h1 > </ div > < br >< br > < div class = "gfg2" > A computer Science portal </ div > </ body > </ html > |
Output:
initial: It is used to set the box-shadow property to its default value.
Syntax:
box-shadow: initial;
Example: This example illustrates the use of the box-shadow property where the initial property is applied to set its values to the default value.
HTML
<!DOCTYPE html> < html > < head > < title >CSS box-shadow Property</ title > < style > .gfg1 { border: 1px solid; padding: 10px; /* box-shadow: initial */ box-shadow: initial; } .gfg2 { border: 1px solid; padding: 10px; /* box-shadow: initial */ box-shadow: initial; } </ style > </ head > < body > < div class = "gfg1" > < h1 >Welcome to GeeksforGeeks!</ h1 > </ div > < br >< br > < div class = "gfg2" > A computer Science portal </ div > </ body > </ html > |
Output:
inherit: This property is inherited from its parent.
none: It is the default value and it does not contain any shadow property.
Supported Browsers: The browser supported by the box-shadow property are listed below:
- Google Chrome 10.0 4.0 -webkit-
- Internet Explorer 9.0 & later (use border-collapse)
- Microsoft Edge 12.0
- Firefox 4.0 3.5 -moz-
- Safari 5.1 3.1 -webkit-
- Opera 10.5
Please Login to comment...