CSS Shadow
CSS3 introduces the ability to add drop shadow effects to elements without the need for sliced images. This provides a more efficient way to create shadows around elements compared to previous methods.
Box shadow
The box-shadow property is used to apply shadows to element boxes. Multiple shadow effects can be applied using a comma-separated list of shadows.
By utilizing the box-shadow property, you can easily add shadow effects to elements in CSS3 without relying on image-slicing techniques.
The basic syntax of creating a box shadow can be given with:
box-shadow: offset-x offset-y blur-radius color;
- offset-x: Sets the horizontal offset of the shadow.
- offset-y: Sets the vertical offset of the shadow.
- blur-radius: Sets the blur radius. A larger value increases the blur and blurs the shadow's edge. Negative values are not allowed.
- color: Sets the color of the shadow. If omitted, it takes the value of the color property.
Input:-
Output:-
Text shadow
We can also highlight a text using shadow as we are doing it to a box in the above example. This property is used to apply the shadow effects on text.
Input:-
Output:-
