Box Shadow in CSS
The box-shadow Property
The CSS3 box-shadow property applies shadow to elements. It has a total of five components.
Five Components of box-shadow are:-
- Horizontal Offset i.e, it will cast a shadow to the right if the value is positive and left if the value is negative.
- Vertical Offset i.e, it will cast a shadow down if the value is positive and up if the value is positive.
- Blur Radius i.e, it will blur the shadow
- Spread i.e, it will spread the shadow
- Color i.e, it will select the color of the shadow
Syntax:-
Its syntax is:-
< style >
element{
box-shadow: none| h-offset v-offset blur spread color | inset| initial| inherit;
}
< /style >
Further Explanation:-
| Value | Description |
|---|---|
| none | No shadow is displayed |
| h-offset | Required. The horizontal offset of the shadow. |
| v-offset | Required. The vertical offset of the shadow. |
| blur | Optional. The blur radius. |
| spread | Optional. The spread radius. |
| color | Optional. The color of the shadow. |
| inset | Optional. Changes the shadow from an outer shadow (outset) to an inner shadow |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
Code Explanation
All Tutorials related to CSS3
CSS3 Intro
Vendor Prefixes
Border Radius Property
Box Shadow Property
Transparency
Text Shadow
Pseudo Classes
Pseudo Elements
Word Wrap
@Font-Face
Linear Gradients
Radial Gradient
Background Size
Background Clip
Opacity
Transitions
Transform Rotate
Translate Skew
Scale and Multiple
Animations
Animation Properties
3D Transform
CSS Filters 1
CSS Filters 2
CSS Filter 3
