Box-shadow adds depth and dimension to elements by creating a shadow effect. It provides visual cues for user interaction and hierarchy. It can be used to enhance the overall appearance of a website.
Syntax
box-shadow: <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;Parameters
offset-x: Horizontal position of the shadow’s outer edge relative to the element’s border. Negative values move the shadow to the left, and positive values move it to the right.offset-y: Vertical position of the shadow’s outer edge relative to the element’s border. Negative values move the shadow upwards, and positive values move it downwards.blur-radius: Controls the blurriness of the shadow. A larger value creates a more diffused shadow, while a smaller value creates a sharper shadow.spread-radius: Controls the size of the shadow. A positive value extends the shadow outwards, while a negative value shrinks it inwards.color: The color of the shadow. Any valid CSS color value can be used.
Example
.element {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}This code will create a shadow on the .element with the following properties:
- Offset: 5 pixels to the right and 5 pixels downwards.
- Blur: 10 pixels.
- Spread: No spread (default).
- Color: Black with 20% opacity.
Multiple Shadows
You can create multiple shadows on an element by separating them with commas:
.element {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2), 2px 2px 5px rgba(0, 0, 0, 0.1);
}Additional Tips
- Experiment with different values for the parameters to achieve the desired effect.
- Consider using a color with opacity to create a more subtle shadow.
- Combine
box-shadowwith other CSS properties likeborder-radiusandbackground-colorfor more complex effects.