CSS Shadow effects are used to add text and images shadow in HTML document.
CSS Text Shadow
The text-shadow property is used to adds shadows to text. This property accepts a comma-separated list of shadows to be applied to the text and any of its decorations. The shadow is defined by some combination of X and Y offsets from the element, blur radius, and color. The default value of the text-shadow property is none.
Following is the syntax:
Property values:
- offset-x or h-shadow: It defines the position of horizontal shadow.
- offset-y or v-shadow: It defines the position of vertical shadow.
- blur-radius: This is used to set the blur radius. Its default value is none.
- color: It is used to set the color of the shadow.
- initial: This property is used to set text-shadow to its default value.
- inherit: This property is inherited from its parent.
Multiple Shadows
If you want to add more than one shadow to the text, then you can add a comma-separated list of shadows.
The below example show the orange and blue glow shadow.
You can also use the text-shadow property for the plain border around some text.
CSS box-shadow
The box-shadow CSS property adds shadow effects around to the frames of an element. You can add multiple effects separated by commas. A box-shadow is described by X and Y offsets relative to the element, blur and spread radii, and color.
Following is the syntax:
Property values:
- offset-x: 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.
- offset-y: 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 shadow above box.
- blur: The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. The default value is 0, the shadow is sharp. Negative values are not allowed.
- spread: Positive values cause the shadow shape to expand in all directions by the specified radius.
- color: The color is the color of the shadow.
- Initial: This property sets its default value.
In the below example, we add the spread values, the spread value is used to set the size of shadow.
By default, the shadow generates outside the box but you can use the inset keyword to apply the shadow inside of the element’s box. Inset shadows are drawn inside the border, above the background, but below content.